MDX is Markdown extended to allow JSX expressions and components inline. A .mdx file is parsed as Markdown — headings, paragraphs, lists, fenced code blocks, links — but anything that looks like JSX ( , ... , or expression curlies {value}) is parsed as JSX and rendered as a React (or Vue, with mdx-vue) component. MDX powers documentation sites built with Next.js, Docusaurus, Astro, Gatsby, and Storybook docs.

MDX Formatter Online — Format Markdown + JSX

Beautify MDX files (Markdown with embedded JSX components). Preserve headings, paragraphs, lists, and code fences while indenting JSX inline — 100% in your browser.

MDX Input

Formatted MDX

What is an MDX Formatter?

An MDX formatter walks an MDX file line by line, leaves Markdown content (headings, paragraphs, lists, code fences) untouched, and reindents top-level JSX blocks with one element per line. MDX is Markdown extended to embed JSX components — a single document mixes prose with React (or Vue, Astro, Solid) components — and reformatting it requires respecting both grammars.

The OpenFormatter MDX tool is a pretty printer — it preserves prose verbatim (Markdown is whitespace-sensitive in subtle ways: blank lines end paragraphs, four-space indents start a code block) and only adjusts JSX. It runs entirely in your browser; nothing is uploaded, no account is needed, no rate limits apply.

How to format MDX — 4 steps

Paste your MDX. Drop a documentation page, blog post, or Storybook docs file into the Input panel. Click Load Sample to try a real Counter component embedded in prose.
Click Format. Markdown lines stay verbatim; JSX blocks are reindented client-side.
Review the output. Confirm headings, lists, and code fences are intact and JSX components are indented one element per line.
Copy the result. Click Copy to paste back into your docs site, repository, or Storybook story.

Side-by-side: compact input vs formatted output

Compact MDX

# Hello

Try the demo:

<Counter><Button>+</Button><Note>Resets on refresh.</Note></Counter>

Formatted MDX

# Hello

Try the demo:

<Counter>
  <Button>+</Button>
  <Note>Resets on refresh.</Note>
</Counter>

Markdown-Safe

Headings, lists, code fences, link syntax, and frontmatter are emitted verbatim — Markdown rendering does not change.

JSX-Aware

Top-level JSX blocks are detected by capitalised tag names and reindented with one element per line.

Browser-Only

MDX runs through JavaScript on your machine. Drafts containing internal API names or unreleased features stay on the device.

Common use cases

check_circleFormat an MDX page for a Next.js docs site (mdx-bundler, next-mdx-remote, or @next/mdx)
check_circleBeautify a Docusaurus MDX file with embedded Tabs, TabItem, and Admonition components
check_circleReformat an Astro .mdx page mixing React and Astro components
check_circleClean up a Storybook docs MDX file before checking in
check_circleFormat a blog post written in MDX before publishing
check_circleReformat third-party docs MDX you have forked or are auditing
check_circleBeautify component-driven documentation in a design-system repo
check_circleFormat an MDX changelog or release-notes file with embedded callouts

MDX formatter vs Prettier vs Remark

A pretty printer is the lightweight option — it preserves prose order and only reindents JSX blocks. Prettier with the MDX plugin goes further: it parses the file with the official MDX parser, applies prose-wrap rules, normalises list markers, and reprints JSX. Remark (and its plugin ecosystem remark-mdx) is an AST-level toolkit — it can rewrite Markdown semantically (autolink headings, normalise link references, transform syntax). Use this online tool for a one-off readability pass; use Prettier for project-wide enforcement; use Remark for AST transformations.

More than MDX formatting

Format Markdown, beautify HTML, or pretty-print JavaScript — all browser-side, all free.

Markdown Formatter HTML Formatter JavaScript Pretty Print

Frequently Asked Questions

What is MDX?

MDX is Markdown extended to allow JSX expressions and components inline. A .mdx file is parsed as Markdown — headings, paragraphs, lists, fenced code blocks, links — but anything that looks like JSX (<MyComponent />, <Tabs><Tab>...</Tab></Tabs>, or expression curlies {value}) is parsed as JSX and rendered as a React (or Vue, with mdx-vue) component. MDX powers documentation sites built with Next.js, Docusaurus, Astro, Gatsby, and Storybook docs.

How is JSX inside Markdown handled?

The formatter walks the file line by line. Markdown lines (headings, paragraphs, lists, code fences) are preserved verbatim — MDX is whitespace-sensitive at the markdown layer (a blank line ends a paragraph, indented code blocks need 4 spaces) and reformatting prose would break rendering. JSX blocks at the top level — those starting with a capitalised tag like <Counter ...> — are detected, the matching close tag is found, and the block is reindented with one element per line.

Will it modify my Markdown headings, lists, or code fences?

No. Markdown lines are emitted unchanged (with trailing whitespace trimmed). Heading levels (#, ##, ###), list markers (-, *, 1.), code fence languages (```ts), inline emphasis (**bold**, *italic*, `code`), and link syntax ([text](url)) all round-trip exactly as you pasted them.

Does it work with Next.js, Docusaurus, and Astro MDX?

Yes — these all use the same upstream MDX parser (mdxjs.com), so the file format is identical. The differences are which components are auto-imported (Next.js MDX needs explicit imports or an mdx-components.tsx file; Docusaurus auto-injects Tabs/TabItem/Admonition; Astro lets you mix .astro components alongside React). The formatter does not need to know about your component library — it formats whatever JSX is present.

Will it preserve frontmatter (YAML at the top of the file)?

Yes. Frontmatter delimited by --- at the start of an MDX file (title:, description:, tags:, layout:) is treated as Markdown content and emitted verbatim. The formatter never modifies the frontmatter block; it only reformats JSX appearing later in the document.

How are JSX expressions like {value} or {variable.prop} handled?

Inline expression braces like {count} or {user.name} embedded in prose are preserved as part of the Markdown text — the formatter does not touch them. Block-level expression braces ({/* JSX comment */} on its own line, or a {array.map(...)} block) are similarly preserved verbatim.

Is the MDX I paste sent to your servers?

No. Formatting runs entirely in your browser using JavaScript. Documentation drafts containing internal API names, unreleased feature descriptions, or customer-specific examples never leave the device. Open DevTools → Network and click Format to verify no requests are made.

How is this different from Prettier with the MDX plugin?

Prettier with the MDX plugin parses the file with the official MDX parser and re-prints both the Markdown (using its prose-wrap, list-marker, and emphasis-marker rules) and the JSX (using its JSX printer). This online tool is lighter — it preserves Markdown lines verbatim and only reindents JSX blocks. For project-wide enforcement use Prettier; for a one-off readability fix on a docs file use this tool.