Writing Blog Posts with MDX
· One min read
Blog posts on this site support MDX — meaning you can embed React components directly inside Markdown. This post is a quick demo of what's possible.
tip
MDX is just Markdown + JSX. If you know Markdown, you already know 90% of it.
Interactive Elements
You can drop React components inline. Here's a live example:
<button onClick={() => alert("T-Rex approved! 🦕")}>
Click me!
</button>
When to Use MDX vs MD
Use .md for: resource pages, guides, anything that's just content.
Use .mdx for: blog posts or pages where you want interactive demos, embedded components, or conditional rendering.
Further Reading
- MDX official docs
- Docusaurus Markdown Features — full reference for admonitions, tabs, code blocks, and more