How to Use MDX for Interactive Posts

This blog is built with Astro and supports MDX, which lets you embed interactive components directly in your markdown posts.

What You Can Do

With MDX, posts can include:

  • React components with full interactivity
  • Plotly charts for data visualization
  • Custom calculators or interactive widgets
  • Embedded iframes for external apps

Example: Interactive Button

Here’s a simple interactive component embedded in this post:

Click me - I’m interactive!

Adding Plotly Charts

For data-heavy posts, you can create a React component with Plotly and embed it:

// src/components/MyChart.tsx
import Plot from 'react-plotly.js';

export default function MyChart() {
  return (
    <Plot
      data={[{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter' }]}
      layout={{ title: 'My Chart' }}
    />
  );
}

Then in your MDX post:

import MyChart from '../../components/MyChart';

<MyChart client:load />

The client:load directive tells Astro to hydrate the component on the client side.

Embedding External Apps

You can also embed Streamlit apps, Observable notebooks, or any iframe-compatible content:

<iframe
  src="https://your-streamlit-app.streamlit.app/?embed=true"
  width="100%"
  height="500px"
/>

Learn More