Will my code fences be reformatted?

The fences and their language tags are kept. The code inside is not reformatted unless you copy it into the matching language tool.

Does MDX go through the network?

No. Prettier runs in your browser. Documentation drafts and proprietary content stay local.

How does it handle JSX inside Markdown?

Embedded JSX is parsed and formatted with the standard Prettier JSX rules, then re-inserted into the document.

What is the difference between Markdown and MDX formatting?

Plain Markdown does not understand JSX. MDX mode keeps both the prose conventions and the component syntax, formatting each correctly.

prettier · mdx · live · client-side

Format MDX with Prettier

Prettier's MDX parser handles Markdown plus JSX components in the same file. Code fences, frontmatter, and JSX props stay tidy. Runs locally.

MDX Formatter

Input

83 B

7 lines

Output

0 B

1 lines

Status

parser…

Ratio

0.00×

out/in

input · mdx

output · formatted mdx

Loading parser…

Quick Start

How to format MDX

Prettier reformats the Markdown body and the JSX islands together, keeping prop quoting and code-fence indentation consistent.

01
Paste MDX
Drop in a docs page with <Component> blocks, frontmatter, and fenced code.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
mdxPrettierASTstandalonelazy
input · sourceraw · AST
```
# Title
<Comp/>
```
loaded · parsedAST · ready
02
Wait for parser
Prettier and the MDX/Babel plugins load lazily on first paint.
Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.
lazyindentprint-widthmemoisedlive
parser · optionsready · live
```
prettier + mdx
```
options applied · livelive
03
Watch it reflow
Headings spaced, JSX self-close normalised, code fences kept verbatim.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstable
out · formattedpretty · ready
```
# Title

<Comp />
```
formatted · liveidempotent
04
Copy or download
Save as .mdx for your docs repo or copy to clipboard. Source stays in your browser.
Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.
exportclipboardbloblanguage MIMEclient-side
ok · copiedready · done
```
OK Copied
```
shipped · ready to shipsuccess

Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don’t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Use Cases

When to format MDX

Docs sites, blog posts, component galleries.

Docs sites

Normalise pages across Docusaurus, Astro, Nextra. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Component galleries

Keep <Demo> blocks tidy in design-system pages. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Blog posts

Reformat after a quick edit before publishing. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Migration cleanup

Tidy MDX after converting from plain markdown. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Code reviews

Strip whitespace churn so diffs show real changes. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Multi-author repos

Enforce one style across contributors. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic

FAQ

Frequently asked questions

Does it run JSX?

No — Prettier only formats source. It never evaluates or renders the components.

What about frontmatter?

YAML frontmatter at the top of the file is preserved exactly.

Will fenced code blocks be re-indented?

No. Prettier leaves the inside of code fences untouched.

Does it sort imports?

No — use the Sort Imports tool for that. Prettier formats whitespace only.

Is anything sent to a server?

No — Prettier runs locally in your browser tab.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!