MDX Formatter
Format and beautify MDX files
New to MDX? Read MDX vs Markdown or browse the MDX cheatsheet.
How to Format MDX
Paste MDX into the editor and the formatted version appears beside it as you type. Indentation gets normalized, frontmatter spacing is tidied up, and JSX attributes line up the way Prettier would align them in your own repo. Your writing itself is untouched. Only whitespace moves, so prose, component props, and frontmatter values come out exactly as you wrote them. Markdown and JSX mixed in the same file are handled in one pass, and the result is ready to paste into a commit.
What the formatter does
Prettier 3.x does the work through its official MDX parser, with one pre-pass in front of it. Prettier deliberately leaves Markdown indentation alone, because four leading spaces mean a code block, so stray indentation on headings and paragraphs would otherwise survive untouched. The pre-pass strips that first, then hands the file over. Frontmatter between --- delimiters stays put, and its keys can be sorted alphabetically. Imports and exports come back with consistent quotes and spacing. All of it runs in your browser: the file you paste never reaches a server.
Formatting options
Five toggles sit above the editor. Tab width switches between 2-space and 4-space indentation; print width sets the wrap point at 80 or 120 characters. Sorting frontmatter alphabetically is the one worth turning on for a shared repo, since it stops key order drifting between contributors. The last two clean up invisible mess: trailing spaces at the ends of lines, and runs of three or more blank lines collapsed back to two. Every toggle re-formats immediately, so you can see what each one does before you commit to it.
When to use an MDX formatter
Before a commit, mostly. Inconsistent whitespace turns a one-line content edit into a twelve-line diff, and that noise is what makes documentation pull requests tedious to review. The other common moment is right after pasting content in from Notion, Google Docs, or an old wiki, where indentation rarely survives the trip. Format first, then run the result through the MDX Validator.
Frequently Asked Questions
Is the MDX Formatter free and open source?
Does the formatter change my content?
Does it handle frontmatter?
What formatting rules does it follow?
Can I configure the formatting options?
About this tool
The MDX Formatter is free and open source. It runs entirely in your browser. Your input is never uploaded, stored, or logged. Open the network tab in your developer tools while the tool runs and you can confirm that for yourself. The full source code is on GitHub under the Apache 2.0 license, so you can read the code, file issues, or fork the project. There are no ads, no accounts, and no usage limits. Built and maintained by Jamdesk.
Maintained by Jamdesk · Last reviewed
Deploy formatted MDX as live docs
Jamdesk formats your MDX automatically when you deploy. Start for Free