About the MDX Formatter
MDX mixes three languages in one file: Markdown for the prose, ES module syntax for imports and exports at the top, and JSX for the components you drop between paragraphs. Formatting only the Markdown half leaves the interesting part untouched, so this page runs two passes. The Markdown pass normalises heading hashes, rewrites list bullets to a single style, pads table cells into aligned columns and strips the double spaces that creep in while editing.
The second pass looks at every block that begins with import, export or a < and reformats it as JavaScript. That is what turns import {Callout} from '../components/Callout' into a properly spaced import and squeezes the stray whitespace out of a component call. Blocks that fail to parse as JavaScript are left exactly as MDX produced them, so a component wrapping several paragraphs of Markdown is never mangled.
Prose wrap is set to preserve by default, which keeps your existing line breaks and makes diffs small. Choose Wrap to reflow paragraphs to the print width, or Unwrap to pull each paragraph onto one long line, which suits teams whose review tooling diffs by sentence. Frontmatter between --- fences is passed through as written. For a file with no components in it, the Markdown Formatter is the lighter option, and the Markdown Viewer renders the result.
How to use
- Paste an .mdx page, including its import and export lines, into the left pane.
- Set the print width your repository uses so tables and wrapped prose match the rest of the project.
- Leave Tidy JSX and imports on unless a component block must stay byte for byte identical.
- Check the status line for how many JSX blocks were rewritten, then copy the result.
Common questions
- Will it break a component that wraps Markdown?
- No. If a block cannot be parsed as JavaScript the formatter leaves it untouched rather than guessing, so multi paragraph components come out unchanged.
- Does it support MDX version 1 and version 2?
- Both parse here. Version 2 expression blocks written with curly braces are recognised, and version 1 style inline HTML is treated as ordinary Markdown HTML.
- What happens to YAML frontmatter?
- It is copied through as it stands. Reformatting keys there would change the meaning of ordered lists in some static site generators.
- Why did my asterisk bullets become hyphens?
- A single bullet character is used throughout so lists stay consistent. Markdown treats hyphen and asterisk bullets as identical, so nothing renders differently.