MDX

MDX lets you use JSX components inside Markdown content. It is an MIT licensed project used with React, Preact, Vue and other JavaScript frameworks.

You write Markdown with imported components, such as charts or alerts, and MDX compiles the file to JavaScript that your framework can render. It has no runtime of its own, so the work happens at build time. Each Markdown element, such as a heading, can be mapped to a custom component, which gives you control over how the content looks.

• Import components into Markdown files
• Replace how headings and other elements render
• Works with Next.js, Docusaurus and Vite
• Compiles at build time with no runtime
• Supports await with compatible frameworks

MDX suits front end developers who build documentation sites, blogs or long-form pages with React-based frameworks. It fits teams that want the simplicity of Markdown for writing and still need interactive elements such as live charts or callouts.

MDX is free and open source under the MIT license. It has integrations for bundlers such as Rollup, esbuild and webpack. Its features depend on the framework you use, so check that framework's support for MDX before you start, and note that recent major versions drop support for older versions of Node.