beta Repository

Interactive Components Demo

Demonstrating the power of MDX in Astro.

MDXAstroReact

What is this?

This page is an MDX file. Behin the scenes, it’s just Markdown, but I can import and use components directly.

1. Alert Boxes (Callouts)

I can drop in alert boxes without writing complex HTML divs every time:

Did you know?

MDX allows you to use your existing Astro, React, Vue, or Svelte components inside your markdown content!

warning

Warning: This is extremely powerful. You can even embed full applications here.

2. Custom Buttons

Here is a button component used directly in the text flow:

Go to Garden Back Home

3. Embedding Interactive Scenes

I can even embed the Particle Animation component right here in the middle of the article:

Live Canvas Component

This changes everything. The “Lab” isn’t separate from the “Article”. The article is the Lab.