MDX Formatter

MDX Formatter – Markdown with JSX, Formatted

MDX lets you use React components inside Markdown, which is why documentation sites built with Docusaurus, Next.js, Astro, Nextra, and Storybook rely on it. The MDX formatter formats all three layers of an MDX file at once:

1. ESM statements – import and export lines at the top are formatted like JavaScript (quotes, spacing, semicolons).
2. JSX components – elements such as <Chart data={data} /> are formatted with normalized spacing and self-closing tags.
3. Markdown content – headings, lists, tables, and emphasis are normalized the same way as in the Markdown Formatter.

How to use it

Paste the content of an .mdx file or click Sample, choose indentation and line width, and copy the result. Errors in the JavaScript or JSX parts are reported with a line and column so you can fix an unclosed component or a broken import.

Formatting rules worth knowing

• Setext headings are converted to # headings.
• Tables are aligned so columns line up in plain text.
• Blank lines are added between Markdown blocks and JSX blocks, because MDX needs them to tell content and components apart.
• Expressions in curly braces such as {meta.title} are kept as written.

Why format MDX?

Docs are code. Consistent formatting means contributors can focus on content, diffs stay small, and accidental syntax problems — such as JSX that is not separated from a paragraph — show up immediately instead of breaking the docs build later.

Related tools

Use the JSX Formatter for the components you import, the Markdown Formatter for plain .md files, and the YAML Beautifier for front matter or sidebar configuration files.