MDX Formatter
Format MDX — Markdown that can contain JSX components and import statements. The prose is normalised the way Markdown is: consistent list markers, heading style, emphasis characters and re-aligned table pipes. The embedded components and imports are formatted as JavaScript. Fenced code blocks are left exactly as written, since their contents are neither Markdown nor JSX.
How it works
Formats MDX, which is Markdown that can contain JSX: the prose is normalised the way Markdown is — list markers, heading style, table alignment — while the embedded components and import statements are formatted as JavaScript.
Fenced code blocks are left exactly as written, since their contents are neither Markdown nor JSX.
Everything runs in your browser — nothing you paste is sent to a server.
Frequently asked questions
What is MDX?
MDX is Markdown that can also contain JSX: you can import a component at the top of the file and use it inline among the prose. It is the format behind most modern documentation sites, because it lets a page stay readable as text while still embedding interactive pieces.
Does the formatter change my components?
Embedded JSX is formatted the same way a JSX file would be — indentation and attribute wrapping — but the components themselves and their props are left semantically unchanged.
Are code blocks reformatted?
No. The contents of a fenced code block are neither Markdown nor JSX, so they are passed through exactly as written regardless of the language tag.
What does it do to tables?
Table pipes are re-aligned into even columns, which is the change most worth having in a document that has been edited by hand over time.
Can I use this on a plain Markdown file?
You can, but the Markdown formatter is the better fit — it does not need to parse the file for JSX, so it will not object to something that happens to look like a component but is not.
Related tools
Markdown Formatter
This Markdown formatter picks one style for lists, headings and emphasis, and re-aligns table pipes.
JSX Formatter
Format React components: wrap attributes, indent nested elements and parenthesise multi-line JSX correctly.
Markdown to HTML Converter
This Markdown to HTML converter renders your document with GitHub extensions on.