WebToolsPlanet
Developer Tools

MDX Formatter

Format embedded JSX components, imports, and export functions inside MDX files with proper indentation.

Last updated: May 29, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Markdown and JSX workflow shortcuts

Clean Markdown with FormatterWrite Markdown in EditorFormat JSX

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is MDX Formatter?

MDX Formatter beautifies MDX source files — the format that combines Markdown prose with JSX components used in Next.js, Gatsby, and Docusaurus documentation. MDX is valid JSX at the file level, so the formatter applies JSX-aware formatting to component definitions, export functions, and import statements while preserving surrounding markdown text. It is intentionally lightweight and focuses on indentation and line breaks rather than full AST parsing.

How to Use MDX Formatter

1

Paste MDX source content.

2

Choose indentation style.

3

Click Format.

4

Review the formatted output.

5

Copy or download the .mdx file.

Common Use Cases

  • Formatting compact MDX component exports before committing to a docs repo.
  • Normalizing indentation in MDX files generated by content tools or migrators.
  • Cleaning up inlined JSX components pasted from React files into MDX.
  • Preparing MDX examples for screenshots or documentation.

Example Input and Output

A compact export function inside MDX is expanded with JSX indentation.

Compact MDX
import {useState} from 'react'
export function Counter(){const [n,setN]=useState(0);return(<div><p>{n}</p><button onClick={()=>setN(n+1)}>+</button></div>)}
Formatted MDX
import { useState } from 'react'
export function Counter() {
  const [n, setN] = useState(0);
  return (
    <div>
      <p>{n}</p>
      <button onClick={() => setN(n + 1)}>+</button>
    </div>
  )
}

Privacy

MDX content is formatted locally in the browser and is not uploaded.

Frequently Asked Questions

Will it reformat plain markdown paragraphs?

Yes — markdown lines are treated as text and may have their whitespace normalized. Indented code blocks and their content may be affected, so review the output for fenced code blocks.

Does it validate MDX syntax?

No. It formats text for readability only. Use the MDX compiler or your editor to check for MDX errors.

Can it format Next.js app router MDX pages?

Yes. It handles import statements, export const metadata, and default export components commonly used in Next.js MDX pages.

Is my code uploaded anywhere?

No. Formatting runs entirely in your browser.

Related Tools

Part of a Collection