MDX enables you to seamlessly use JSX in your Markdown documents. This makes writing long-form content with components a blast.
❤️ Powerful: MDX makes it effortless to import and render components in your React/JSX-based projects.
💻 Component-based: Use existing JSX components inside your MDX, and import MDX files as plain components.
🔥 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.”
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.
- Fast
- No runtime compilation
- [Pluggable][remark-plugins]
- Element to React component mapping
- React component
import/export - Customizable layouts
- Webpack loader
- Parcel plugin
- Next.js plugin
- Gatsby plugin
npx init mdx
See the related projects in the MDX specification
- John Otander (@4lpine) – Compositor + Clearbit
- Tim Neutkens (@timneutkens) – ZEIT
- Guillermo Rauch (@rauchg) – ZEIT
- Brent Jackson (@jxnblk) – Compositor
MIT license