Interactive MDX Post

What is MDX?

MDX lets you write JSX directly in Markdown. This means you can:

• Use React components inside blog posts
• Create interactive demos
• Import custom UI elements

Mermaid Diagram via Component

You can also use the <MermaidBlock> component directly. Write the diagram as children for clean formatting:

Or use the chart prop with a template literal:

Code with Shiki Highlighting

// JSX in MDX
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Math & Logic

MDX supports any valid Markdown plus JSX:

• Bold and italic text
• Links
• inline code

• Blockquotes

Lists

1. First item
2. Second item
   • Nested bullet
   • Another nested
3. Third item

Conclusion

MDX opens up endless possibilities for rich, interactive blog content. Combine it with:

• Shiki for beautiful code highlighting
• Mermaid for diagrams
• Custom React components for anything else