Markdown for the
component era
MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 Continue reading »
New: MDX 3!
A small major this time, nothing big, which is also nice sometimes! This mainly drops support for old Node (use 16 or later), adds modern ES2024 support in MDX, supports await in MDX (if your framework does too), and removes several deprecated options.
What does MDX do?
You write markdown with embedded components through JSX:
import {Chart} from './snowfall.js'
export const year = 2023
# Last year’s snowfall
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
<Chart year={year} color="#fcb32c" />
We made an interactive playground where you can try MDX out and see what it turns into. Play »
Get started
There are integrations for most bundlers, frameworks, and editors. Whether you build with Docusaurus, Next.js, or Vite. You prefer Rollup, esbuild, or webpack. You’re using React, Preact, or Vue. Get started »
MDX in short
- ❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in JSX-based projects
- 💻 Everything is a component: Use existing components in your MDX and import other MDX files as components
- 🔧 Customizable: Decide which component is rendered for each markdown construct (
{h1: MyHeading}) - 📚 Markdown-based: The simplicity and elegance of markdown remains, you use JSX only when you want to
- 🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage
lol mdx is so good