MDX Demo: Embedding Interactive Charts

This post is written in MDX, which means it can embed real React components. Everything you can write in Markdown works here — and a little more.

Regular Markdown still works

Tables, code blocks, lists, and blockquotes all render exactly as expected:

type Post = {
  slug: string;
  title: string;
  category: string;
};

The interactive part

Below is a live React component — hover the bars to inspect values. No chart library needed, just a small client-side SVG component:

Why this matters

Static content travels well; interactive content teaches well. MDX gives you both — Markdown for the writing, React for the moments where a diagram explains more than a paragraph.