# MDX Formatter

Clean up MDX documents with this MDX Formatter. Paste MDX with imports, exports, JSX components and Markdown and the tool trims the document's outer blank lines and realigns every pipe table, padding cells to their column width and rebuilding the separator row with its alignment colons. Imports, components and expressions stay exactly as written, so docs authors get tidy tables without breaking the build.

## Frequently asked questions

### What does the MDX Formatter change?

It realigns pipe tables and trims blank lines and spaces at the start and end of the document. Everything else, including Markdown text, imports, exports and JSX, is kept exactly as written.

### Are imports, exports and JSX components touched?

No, import and export statements, component tags such as <Callout type="info"> and expressions in curly braces are copied unchanged. The formatter never reflows code, so it cannot break your MDX build.

### How are tables formatted?

Each row gets leading and trailing pipes, and each cell is padded to the widest cell in its column with a minimum of three characters. The separator row is rebuilt with matching dashes.

### Are table alignments preserved?

Yes, alignment colons in the separator row, such as :---, :---: and ---:, are kept. Left, center and right aligned columns render the same after formatting.

### Are code blocks changed?

No, content between fences of three backticks or three tildes is left as it is. Lines with pipes inside code blocks are never treated as tables.

### Why are some table columns wider than expected?

Widths are counted in UTF-8 bytes, so accented letters and emoji count as more than one character. The extra padding only shows in the source; the rendered table looks the same.

### Does it format the JavaScript inside my MDX?

No, code in imports, exports and expressions is not reformatted. Format larger code blocks separately with the JavaScript or JSX Formatter.

### What is the difference from the Markdown Formatter?

Both apply the same rules; this tool marks its result as mdx. Use it for .mdx files in Docusaurus, Next.js, Astro or similar documentation setups.

### Why is the result wrapped in an mdx code fence?

The output is returned inside a code block marked mdx, so it shows as source when pasted into Markdown. Copy the lines between the outer fences into your .mdx file.

### How large can my document be?

Up to 5 MB per run; larger input is rejected with a message. The output is identical to the MDX option of the Code Formatter.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)
