Skip to content
JamdeskUtilities
Free · Open source · Client-side

MDX Formatter

Format and beautify MDX files

Deploy formatted MDX as live docs

Jamdesk formats your MDX automatically when you deploy. Learn more

How to Format MDX

Paste your MDX into the editor and the formatter will apply consistent indentation, normalize frontmatter spacing, and clean up JSX component formatting. The formatter preserves your content while fixing whitespace issues, aligning attributes, and ensuring consistent line breaks between sections. It handles mixed Markdown and JSX syntax correctly, so component props stay readable alongside your prose. The output is ready to commit — no manual cleanup needed.

What the formatter does

The MDX Formatter uses Prettier 3.x with the built-in MDX parser to format your files. It handles mixed Markdown prose and JSX component syntax in a single pass. Frontmatter (YAML between --- delimiters) is preserved and optionally sorted alphabetically. Import and export statements are normalized to use consistent quote style and spacing. The formatter processes files up to 50KB entirely in your browser — nothing is sent to a server.

Formatting options

Tab width toggles between 2-space and 4-space indentation. Sort frontmatter alphabetically orders your YAML keys for consistency across files. Trim trailing whitespace removes invisible spaces at the end of lines. Collapse blank lines reduces 3 or more consecutive blank lines to 2. Print width switches between 80 and 120 character line wrapping.

When to use an MDX formatter

Use the formatter before committing MDX files to version control, after copy-pasting content from external sources, or when onboarding a team to consistent formatting standards. It is especially useful for documentation repositories with multiple contributors where inconsistent whitespace creates noisy diffs. The formatter pairs well with the MDX Validator — format first, then validate.

Frequently Asked Questions

Does the formatter change my content?
No. The formatter only adjusts whitespace, indentation, and formatting. Your actual content, component props, and frontmatter values are preserved exactly as written.
Does it handle frontmatter?
Yes. The formatter correctly handles YAML frontmatter blocks, preserving their structure while normalizing spacing and indentation within the frontmatter section.
What formatting rules does it follow?
The formatter uses Prettier with MDX support. It applies standard Prettier rules for Markdown and JSX, including consistent indentation, line wrapping, and attribute alignment.
Can I configure the formatting options?
Yes. The toolbar above the editor lets you toggle between 2-space and 4-space indentation, enable alphabetical frontmatter key sorting, trim trailing whitespace, collapse consecutive blank lines, and switch between 80 and 120 character print width. These options apply in real time as you edit.
Is the MDX Formatter free and open source?
Yes. The MDX Formatter is free and open source under the Apache 2.0 license. The full source code is on GitHub at github.com/jamdesk/utilities, and there are no ads, accounts, or usage limits.

About this tool

The MDX Formatter is free and open source, and runs entirely in your browser. Your input is never uploaded, stored, or logged — you can verify this by opening the network tab in your browser developer tools while the tool runs. 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.

Related Tools

✓

MDX Validator

Check MDX for syntax errors

👁

MDX Viewer

Preview rendered MDX output

↓

MDX to Markdown

Strip JSX, get clean Markdown

🔄

Markdown to HTML

Convert Markdown to clean HTML

📋

YAML Validator

Validate YAML syntax and find errors

⇄

JSON ↔ YAML

Convert between JSON and YAML

📊

Markdown Table Generator

Convert CSV or TSV to Markdown tables