html★ naturally supports islands architecture by enhancing only the elements you choose, leaving static content untouched.
What is Islands Architecture?
Islands architecture is a pattern where most of your page is static HTML, with small "islands" of interactivity scattered throughout. Instead of hydrating the entire page with JavaScript, only specific components become interactive.
This approach was popularized by frameworks like Astro, but html★ achieves the same result with a simpler mental model: add data-* attributes only where you need interactivity.
The Key Difference: Unlike component-based islands frameworks, html★ doesn't require you to think about "components" at all. You just write HTML and add attributes where you want dynamic behavior.
Natural Island Boundaries
With html★, islands are defined by where you place your data-* attributes. Static content stays static:
<!DOCTYPE html><html lang="en"><head> <title>My Blog</title></head><body> <!-- Static: renders immediately, no JS needed --> <header> <h1>My Blog</h1> <p>Thoughts on web development</p> </header> <!-- Static: main article content --> <article> <h2>Understanding Islands Architecture</h2> <p>Long article content here...</p> <p>More content...</p> </article> <!-- ISLAND: Interactive comments section --> <section id="comments" data-target="#comments" data-swap="inner"> <h3>Comments</h3> <form action="/api/comments" method="post"> <textarea name="comment"></textarea> <button>Post Comment</button> </form> <div id="comment-list"> <!-- Comments load here --> </div> </section> <!-- Static: footer --> <footer> <p>Copyright 2024</p> </footer> <script src="https://unpkg.com/html-star"></script></body></html>In this example, the header, article, and footer are completely static. Only the comments section has html★ attributes, making it the only "island" of interactivity.
Multiple Islands Example
A typical e-commerce product page might have several independent islands:
<body> <!-- Static: Product info --> <main> <h1>Premium Widget</h1> <p>The finest widget money can buy.</p> <p class="price">$99.99</p> </main> <!-- ISLAND 1: Add to cart --> <form action="/cart/add" method="post" data-target="#cart-status" data-swap="inner"> <input type="hidden" name="product_id" value="123"> <button>Add to Cart</button> </form> <div id="cart-status"></div> <!-- Static: Product description --> <section> <h2>Description</h2> <p>Detailed product description...</p> </section> <!-- ISLAND 2: Live inventory --> <div data-sse="/api/inventory/123" data-target="#stock"> <p id="stock">Checking availability...</p> </div> <!-- ISLAND 3: Reviews with load more --> <section id="reviews"> <h2>Reviews</h2> <div id="review-list"> <!-- Initial reviews --> </div> <button data-href="/api/reviews?page=2" data-target="#review-list" data-swap="append"> Load More </button> </section> <script src="https://unpkg.com/html-star"></script></body>Benefits
Using html★ for islands architecture provides several key advantages:
Smaller JavaScript Footprint
html★ is under 8KB gzipped. Compare this to component-based frameworks that often require 50KB+ just for the runtime, plus the component code itself.
Faster Initial Render
Static content renders immediately. There's no JavaScript execution blocking the first paint. Interactive islands enhance progressively after the page loads.
SEO-Friendly
Your content is real HTML that search engines can index. No client-side rendering means crawlers see exactly what users see.
Progressive Enhancement
Islands work without JavaScript too. Forms submit normally, links navigate normally. html★ just makes them better when JS is available.
No Build Step Required
Unlike component-based islands frameworks, html★ doesn't require compilation. Just add the script tag and start adding attributes.
Islands vs Full-Page Enhancement
You can choose your level of enhancement:
| Approach | Use Case | Example |
|---|---|---|
| Minimal islands | Content-heavy sites (blogs, docs) | Only forms and search are enhanced |
| Section-based islands | Mixed content (e-commerce, dashboards) | Specific sections get interactivity |
| Full SPA-style | Highly interactive apps | Global data-target on body |
No Configuration Needed: html★ doesn't have an "islands mode" to enable. The architecture emerges naturally from how you use attributes. Place them sparingly for islands, or broadly for SPA-style behavior.
Best Practices
- Start static — Write your page as plain HTML first
- Identify interactions — Mark which parts need to be dynamic
- Add attributes selectively — Only enhance what needs it
- Keep islands independent — Each island should work on its own
- Use cascade wisely — Set attributes on containers, not every element
Next Steps
- Learn how attribute cascade can define island boundaries
- Explore triggers for lazy-loading islands
- Use SSE for real-time island updates