Media and documents · Comparison
Markdown vs MDX
MDX is Markdown plus components. The extra power suits interactive docs and blogs, but it makes files stricter and turns content into code.
2 options · 7 questions side by side · updated
| Compare | Markdown | MDX |
|---|---|---|
| What it is | Plain-text formatting syntax | Markdown plus JSX components |
| Output | HTML | JavaScript components that render HTML |
| Components and code | None; raw HTML at most | Imports, JSX and JavaScript expressions |
| Strictness | Forgiving; mistakes still render | Strict; a typo can break the build |
| Where it works | Almost everywhere: GitHub, editors, CMSs, chat | Sites with an MDX build step or runtime |
| Untrusted content | Fine once the HTML is sanitised | Never compile MDX written by users |
| Best for | READMEs, notes and simple blog posts | Docs and blogs with interactive parts |
How to choose between Markdown and MDX
- Pick Markdown for portable content that many tools and writers can edit.
- Pick MDX when pages need live components such as charts, tabs or demos, and a developer looks after the build.
- Most MDX setups also accept plain .md files, so a site can mix both.
The options
- MarkdownA simple way to write formatted text with ordinary characters, such as # for a heading and * for emphasis, that reads well as it is and converts cleanly to HTML.
- MDXMarkdown that can also contain React-style components, so a blog post or documentation page can include live charts, callouts, tabs or interactive demos.
More comparisons
- pdf-lib vs @react-pdf/renderer vs PuppeteerThree common ways to produce PDFs with JavaScript: draw on PDF pages directly, describe the document with React components, or print a real web page in a headless browser.
- Canvas API vs Fabric.js vs Three.jsAll three draw into a canvas element. The difference is how much they do for you: raw pixels, editable 2D objects, or complete 3D scenes.
- React vs Vue vs Angular vs SvelteThe four main ways to build interactive web interfaces. Each can build almost anything; they differ in how much they include, how they update the page and how large their communities are.
- Next.js vs Vite vs Astro vs Create React AppFour ways to start a React-based website or app. They are not quite the same kind of tool: Next.js and Astro are frameworks, Vite is a build tool, and Create React App is a retired starter.
- Tailwind CSS vs Radix UI vs shadcn/uiThese three are often named together because they stack: Tailwind provides the styling, Radix provides accessible behaviour, and shadcn/ui combines styling with accessible primitives (Radix or Base UI) into components you own.
- Zustand vs Redux vs TanStack QueryZustand and Redux manage state that lives in the browser; TanStack Query manages data that lives on a server. Many apps use one of the first two alongside the third.
Crafted in the dark. Shipped to the world.
Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.