This blog is built with Astro and posts are written in MDX. The practical consequence: a post isn’t limited to prose and code blocks — it can embed a live, interactive component that hydrates right where you’re reading.
Here’s one. This is a real React component rendered inside this post:
5
How it works
The post imports a component and drops it into the prose:
import Counter from "@/components/mdx/Counter";
<Counter client:visible initial={5} />The client:visible directive is Astro’s island architecture at work: the
component ships zero JavaScript until it scrolls into view, then hydrates.
The rest of this page stays static HTML.
That’s the whole trick. Future posts use this for things like algorithm visualizers, latency calculators, and interactive config builders — anywhere poking at a thing beats reading about it.