Using MDX in Astro

MDX allows you to use JSX components directly in your markdown content. This is incredibly powerful for creating interactive and dynamic content!

What Can You Do With MDX?

With MDX, you can:

1. Import and use components in your markdown
2. Add interactive elements like charts, forms, or animations
3. Create reusable content blocks with components
4. Use JavaScript expressions in your content

Example: Callout Component

Here’s a custom callout component in action:

JavaScript Expressions

You can use JavaScript expressions inline:

The current year is 2026 and the current month is January.

Why Use MDX?

• ✅ Write markdown as usual
• ✅ Drop in components when you need them
• ✅ Keep your content maintainable and readable
• ✅ No need to write HTML for complex layouts

Regular Markdown Still Works

You can still use all your favorite markdown features:

• Lists
• Bold and italic
• code blocks
• Links and images
• And more!

// Code blocks work perfectly
const greeting = 'Hello from MDX!';
console.log(greeting);

Interactive Components

Interactive Data Visualization

Here’s an interactive chart that visitors can customize. Switch between bar and line charts, toggle value labels, and see live statistics:

This is perfect for:

• 📊 Displaying analytics or metrics
• 📈 Showing progress over time
• 💪 Fitness tracking (weight, reps, distance)
• 📚 Reading stats (books per month, pages read)
• ✈️ Travel data (countries visited, trips per year)

You can pass any data to this component and it will visualize it interactively!

Simple Counter Demo

Here’s a counter component with client-side JavaScript:

And here’s a collapsible/toggle component:

Pretty cool, right? 🚀