Formatters
MDX Formatter
Markdown prose and JSX components formatted together — the docs-site author's cleanup pass.
In short
Format MDX online: Markdown prose plus JSX components and import/export statements, both formatted correctly in one pass. Prettier engine. Free.
By NaveenKumar T · Updated
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
MDX Formatter: input and output
An installation page from a docs site: two imports with mismatched quoting, an exported `meta` object, a setext heading, a `<Callout>` with prose children and a `<Tabs>` component whose array prop is written inline.
import {Callout} from '../components/Callout'
import Tabs from "../components/Tabs"
export const meta = {title:'Installing the CLI',updated:"2026-08-01"}
Installing the CLI
==================
<Callout type='warning' title="Node 20+">The installer requires Node **20** or newer; run `node -v` first.</Callout>
1. Download the release
2. Verify the checksum
3. Run `npm i -g @acme/cli`
<Tabs items={['npm','pnpm',"yarn"]} defaultIndex={0} />
Then log in with `acme login` and you're done!import { Callout } from "../components/Callout";
import Tabs from "../components/Tabs";
export const meta = { title: "Installing the CLI", updated: "2026-08-01" };
# Installing the CLI
<Callout type="warning" title="Node 20+">
The installer requires Node **20** or newer; run `node -v` first.
</Callout>
1. Download the release
2. Verify the checksum
3. Run `npm i -g @acme/cli`
<Tabs items={["npm", "pnpm", "yarn"]} defaultIndex={0} />
Then log in with `acme login` and you're done!
The imports and `export const meta` gain semicolons and double quotes like any ES module, the `<Callout>` children move onto their own indented line JSX-style, and the `<Tabs>` array prop is reprinted by the JavaScript printer — while the prose and list follow the Markdown rules.
Learn more
Formatting MDX, properly
MDX interleaves two languages: CommonMark prose and JSX with real imports. Formatting it means parsing both — prose rules for paragraphs and lists, JavaScript rules for component tags, expressions and import/export lines. Prettier's MDX support handles the interleaving, keeping component props wrapped like code and bullets normalized like docs.
MDX powers modern docs sites (Docusaurus, Nextra, Astro content) where dozens of contributors edit the same pages. A canonical format pass before commit is what keeps those collaborative files from drifting into mixed-style chaos.
Help
Frequently asked questions
Everything you need to know about the MDX Formatter.
01How do I format MDX code here?
Paste your MDX (or load a file/URL) and press Format. Prettier parses the interleaved Markdown prose and JSX components together — component tags and imports format as JavaScript, prose formats as Markdown — reporting the exact position of anything that fails to parse.
02Why does my MDX fail to format when the Markdown looks fine?
The error is usually in JSX-land: an unclosed component tag, a brace expression that doesn't parse, a bad import line. MDX formatting is stricter than plain Markdown precisely because components must parse as real JavaScript — the reported line points at the offending tag.
03Which MDX syntax does the formatter understand?
Prettier's `mdx` parser targets MDX version 1 syntax. `import` and `export` lines are printed as ES modules (semicolons, double quotes), a JSX element on its own paragraph is reprinted by the JavaScript printer with props wrapped and arrays normalized, and everything else follows the Markdown rules. MDX 2 and 3 forms differ: an inline `{expression}` inside a paragraph is treated as text (its `*` gets escaped), and Markdown nested inside a JSX block is left as raw text — so keep expressions and components on lines of their own.