MDX

Markdown for the component era

MDX is a format that lets you seamlessly use JSX in your Markdown documents. You can import components, like interactive charts or notifs, and export metadata. This makes writing long-form content with components a blast 🚀.

Try it

# Hello, world!

Here's an example of the [Rebass](https://jxnblk.com/rebass)
Donut rendered inside an MDX document.

<Donut value={2/3} />

❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.

💻 Everything is a component: Use existing components inside your MDX and import other MDX files as plain components.

🔧 Customizable: Decide which component is rendered for each markdown element ({ h1: MyHeading }).

📚 Markdown-based: The simplicity and elegance of markdown remains, you interleave JSX only when you want to.

🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage.

“It’s extremely useful for using design system components to render markdown and weaving interactive components in with existing markdown.”

— @chrisbiscardi

Why

Before MDX, some of the benefits of writing Markdown were lost when integrating with JSX. Implementations were often template string-based which required lots of escaping and cumbersome syntax.

MDX seeks to make writing with Markdown and JSX simpler while being more expressive. The possibilities are endless when you combine components (that can even be dynamic or load data) with the simplicity of Markdown for long-form content.

Features

• Fast
• No runtime compilation
• Pluggable
• Element to React component mapping
• React component import/export
• Customizable layouts
• Webpack loader
• Parcel plugin
• Next.js plugin
• Gatsby plugin

Watch some of these features in action