Interactive Components with Solid

This post demonstrates how to embed interactive Solid components in your blog posts.

Counter Example

Here’s a simple counter built with SolidJS:

0

Interactive counter

The client:visible directive tells Astro to only hydrate this component when it becomes visible in the viewport, keeping the page fast.

How it works

You can import any Solid component and use it directly in your MDX files. Astro will handle the hydration automatically.