Islands Architecture

Interactive vanilla JS islands in a sea of static HTML - no React runtime needed!

Vanilla JS Counter

Pure JavaScript, no framework overhead

Independent State

Each counter maintains its own state

Zero Hydration

No React runtime = faster LCP

~182 KB Lighter

No React/ReactDOM means much smaller bundles

Vanilla JS vs React Islands

Approach	JS Bundle	Use Case
Vanilla JS	~1-5 KB per component	Simple interactions, toggles, forms
React Islands	~182 KB + component code	Complex state management, large apps
Preact Islands	~10 KB + component code	React API with smaller footprint

Code Example

---
// Counter.astro - Vanilla JS island
---
<div class="counter" data-counter>
  <button data-decrement>-</button>
  <span data-count>0</span>
  <button data-increment>+</button>
</div>

<script>
  // Each counter maintains its own state
  document.querySelectorAll('[data-counter]').forEach((el) => {
    let count = 0
    const display = el.querySelector('[data-count]')

    el.querySelector('[data-decrement]').onclick = () => {
      count--
      display.textContent = count
    }

    el.querySelector('[data-increment]').onclick = () => {
      count++
      display.textContent = count
    }
  })
</script>