MDX is a format that seamlessly combines Markdown with JSX, allowing authors to embed React components directly within Markdown documents. It solves the limitation of standard Markdown which only supports static content by enabling interactive, dynamic elements like live code editors, charts, interactive examples, and custom UI components within documentation and content pages. MDX compiles to JavaScript and can be imported and rendered like any other React component, bridging the gap between content authoring and application development.
MDX supports the full Markdown syntax alongside JSX expressions, component imports, and JavaScript expressions. It provides a provider-based component mapping system that lets you replace standard HTML elements with custom React components globally, support for remark and rehype plugins for extending Markdown processing, and export capabilities for defining metadata and variables within content files. MDX v3 is built on a modern AST-based compilation pipeline that produces standard ES module output, and supports both compile-time and runtime processing for maximum flexibility.
MDX is widely adopted across the JavaScript documentation ecosystem and is the content format used by Docusaurus, Nextra, Next.js, Gatsby, and many other frameworks and documentation tools. It is essential for technical writers and content teams who need to create interactive documentation, blog posts with live code examples, or educational content with embedded exercises. MDX is particularly valuable for design system documentation, component library showcases, and developer tutorials where showing interactive, runnable examples alongside explanatory text significantly improves the learning experience.
