Astro Islands Cost Visualizer
Stack islands on a page and see approximate framework JS shipped — plus when each client:* directive loads and runs.
~~~
Add an island
Your page
No islands yet — static HTML only, zero framework JS from islands.
Load timing
~~~
Framework sizes (approximate)
| Framework | Min KB | Gzip KB | Note |
|---|---|---|---|
client:* directives
| Directive | When JS loads | When it runs |
|---|---|---|
~~~
About this tool
Astro's pitch is islands architecture: ship static HTML by default, hydrate only what needs JavaScript. Numbers here are rough snapshots of framework runtimes — your bundle, tree-shaking, and shared chunks change the real bill.
Zero islands means zero framework JS from interactive components. That is the whole point — reach for an island when static HTML is not enough.
~~~