PrettifyPrettify

MDX Formatter

Paste an .mdx file and Prettier formats the Markdown parts: headings, lists, tables, and spacing. Imports, exports, and JSX components stay as you wrote them. If formatting would change how MDX reads the file, Prettify keeps your text and tells you so.

Result
The formatted result shows here as you paste.
Runs in your browser. Nothing is uploaded.

Why MDX formatting needs care

Prettier's MDX parser follows MDX 1, while current MDX tools use MDX 3, and the two read some files differently. For example, Prettier can re-indent a list that follows a paragraph inside a <Callout>. MDX 3 then reads a different document, or rejects the file.

Prettify formats with embedded code formatting off, so ESM and JSX are not rewritten. It then parses the input and the output with MDX 3 and compares them. If they differ, the original text is kept and you see the note "Kept your MDX as written".

What gets formatted and what stays

The Markdown around and between components is formatted: heading markers, list markers, blank lines between blocks, emphasis, and table alignment.

The import and export lines, JSX components and their props, expressions in braces, and the frontmatter keep their exact text. A file that MDX 3 cannot parse at all is formatted as plain Prettier output, because there is no MDX meaning to protect.

Check the result in the Preview

Open the result in the editor to read it in the Preview. Each component shows as a labeled box with its props and its content, so you can see at a glance that a list is still inside its <Callout> and each <Tab> still holds its own content.

Frequently asked questions

Does the MDX formatter change my JSX?

No. Components, their props, expressions in braces, and the import and export lines keep their exact text. Only the Markdown between them is formatted.

What happens when formatting would break my file?

Prettify compares how MDX 3 reads the file before and after Prettier. If the two differ, it keeps your text exactly and shows "Kept your MDX as written", so you never get a file that reads differently.

Which MDX version does it check against?

MDX 3, the current major version. Prettier itself follows MDX 1, which is why Prettify checks the result before it keeps it.

Is the MDX formatter free?

Yes. Formatting, the Raw view, the Preview with component boxes, and the frontmatter Properties card are free with no sign-up.

Is my MDX uploaded to a server?

No. Prettier and the MDX 3 check run in your browser, and the file stays on your device.

Related tools

Parsing and editing run in your browser. Your documents stay on your device.