MDX Has a Free API: Here's How to Build Interactive Documentation with React Components

What is MDX? MDX lets you use JSX in your Markdown content. Write Markdown for your prose, and embed React components for interactive examples, charts, alerts — anything React can render. MDX powers documentation at Vercel, Stripe, GitHub , and thousands of other companies. And its compiler API is completely free and open source. The MDX Compiler API MDX provides a programmatic API to compile .mdx files into JavaScript: import { compile } from " @mdx-js/mdx " ; const mdxContent = ` # Hello World This is **MDX** with a React component: <Counter initial={5} /> ` ; const result = await compile ( mdxContent ); console . log ( String ( result )); // Outputs compiled JavaScript with JSX Install npm install @mdx-js/mdx @mdx-js/react Process MDX at Build Time import { compile } from " @mdx-js/mdx " ; import remarkGfm from " remark-gfm " ; import rehypeHighlight from " rehype-highlight " ; const compiled = await compile ( mdxSource , { remarkPlugins : [ remarkGfm ], rehypePlugins : [ rehypeHigh