MDX Formatter
Format MDX (Markdown + JSX) documents cleanly and consistently. It runs entirely on your device — nothing is uploaded.
Example
Format MDX (Markdown + JSX) documents cleanly and consistently.
How it works
Prettier's MDX parser formats both the Markdown prose and embedded JSX in your document.
Good to know
The MDX Formatter takes an MDX document — Markdown prose mixed with embedded JSX components — and rewrites it with consistent spacing, indentation, line breaks, and quote style using Prettier's MDX parser. It is aimed at developers and technical writers who build documentation sites, blogs, or component libraries with frameworks like Next.js, Docusaurus, or Astro, where content and React-style components live side by side in the same file.
Reach for it when an MDX file has drifted out of shape: inconsistent heading spacing, ragged JSX attribute wrapping, mismatched quotes, or messy indentation after a copy-paste or a merge. It is also handy as a quick pre-commit check so your .mdx files match the same formatting your editor's Prettier setup would apply, without needing a local toolchain installed.
Read the output as a normalized version of the same document, not a rewritten one: the formatter preserves your content and component logic and only changes presentation — adding blank lines around block elements, aligning JSX props, and standardizing list and code-fence formatting. If the result looks identical, your input was already clean; if it changes a lot, those were the inconsistencies Prettier would have flagged.
One caveat: MDX is stricter than plain Markdown, so the parser can error on invalid JSX, unclosed tags, or expressions Prettier cannot parse — fix the syntax first, then reformat. Everything runs in your browser via the bundled Prettier scripts, so files stay on your device, but very large documents may take a moment since formatting happens client-side.
Frequently asked questions
Is my data uploaded anywhere?
No — everything runs in your browser. Your code never leaves your device, so it's safe for private work and runs offline once loaded.
Is this tool free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between MDX and Markdown?
Markdown is plain text markup for prose. MDX extends Markdown by allowing you to import and use JSX components and JavaScript expressions directly inside the document, so you can mix written content with interactive React-style elements in one file.
Does formatting MDX change my JSX components or their behavior?
No. The formatter only adjusts presentation — indentation, spacing, line wrapping, and quote style. Your component names, props, and logic stay the same, so the rendered output is unchanged.
Why does the MDX formatter throw a parse error on my file?
MDX requires valid JSX, so unclosed tags, mismatched brackets, or invalid expressions will stop the parser. Fix the underlying syntax error first, then run the formatter again.
Can I use this formatter to enforce my project's Prettier rules?
It uses Prettier's standard MDX formatting defaults rather than reading your project's custom config file. The output will match a default Prettier setup, but project-specific options like print width or tab settings are not applied here.
Is the MDX formatter safe for private or proprietary content?
Yes. All formatting runs locally in your browser using bundled Prettier scripts, and the content is never uploaded to a server. Once the page has loaded it can also work offline.
What file extension should MDX documents use?
MDX files typically use the .mdx extension, which tells frameworks like Next.js, Docusaurus, and Astro to process the file with an MDX compiler rather than a plain Markdown parser.
Will the formatter reformat code blocks inside my MDX file?
Prettier formats the Markdown structure and embedded JSX, and fenced code blocks are normalized for fence style and surrounding spacing. The code inside a fenced block is generally left as written rather than reformatted by language.
Related tools