MDX Support is Live: Embed Components in Markdown
MDX lets you mix Markdown and components. Here are three common patterns.
1. Embed an Astro component
Key point:
MDX files can import components directly, just like in a page.
2. Embed interactive JSX
Click to expand: a collapsible code block
const handler = (e: KeyboardEvent) => {
console.log(e.key);
};3. Plain Markdown still works
Bold, links, tables, and code blocks all work as before:
| Capability | Markdown | MDX |
|---|---|---|
| Text formatting | ✅ | ✅ |
| Embed components | ❌ | ✅ |
| Interactive content | ❌ | ✅ |