Embedding a live demo in a post

A screenshot of an interface tells you what it looked like. It can’t tell you how it felt — whether the timing was right, whether the motion carried meaning. For that the thing has to run.

Because posts are MDX, a post can import a component straight from the codebase and render it:

import ToastStack from "@/playground/demos/ToastStack";

<ToastStack />

Which gives you the actual component, not a picture of it:

Hover a toast and its timer pauses. That detail is the whole reason the component exists, and it is invisible in a screenshot.

How it works

@astrojs/mdx compiles each post to a component, so imports resolve exactly as they do anywhere else in src/app. Adding client:visible hydrates the demo when it scrolls into view, which keeps the rest of the page cheap.