Interactive examples

Astro’s islands architecture lets us hydrate only the components that truly need JavaScript. The rest of the page ships as static HTML.

D3 bar chart (client:load)

The chart below hydrates immediately on the client to render an SVG visualization. It relies on d3-scale and friends but keeps the payload scoped to this single container.

three.js cube (client:visible)

The three.js example waits until the canvas scrolls into view before hydrating. That keeps the main bundle small until a reader intentionally explores the 3D content.

Tips for future islands

• Prefer client:visible or client:idle for non-critical interactivity.
• Wrap heavy embeds (like YouTube) in click-to-load components to preserve performance budgets.
• Co-locate island props and data with their MDX chapters for easier authoring.