Most of this blog ships as static HTML with zero JavaScript. But when a post needs an interactive diagram, we mount a React component as an Astro island — JS loads only for that component, only on pages that use it.

A live visx bar chart

Hover the bars:

The client:visible directive defers hydration until the chart scrolls into view. Other options: client:load, client:idle, client:only="react".

How it works

1. The chart lives in src/components/BarChartDemo.tsx as a normal React component using @visx/*.
2. We import it into MDX and render it with a client:* directive.
3. Astro builds the rest of the page as static HTML and ships the React runtime only for this island.