MDX Formatter

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

Last updated: May 29, 2026

Indent:Preserve blank linesFinal newline

MDX Source

8 lines, 360 B

Formatted MDX

import{Callout} from './components'
import{useState} from 'react'
# Getting Started
Welcome to the docs. Here is a quick example.
export function Counter() {
  const [count,setCount]=useState(0);
  return(
  <div>
    <p>
      Count:
      {count}
    </p>
    <button onClick={()=>setCount(c=>c+1)}>
      Increment
    </button>
  </div>
  )
}
<Callout type="info">
  This is an info callout inside MDX.
</Callout>

21 lines, 417 B

Input: 8 linesOutput: 21 linesSize: 417 B

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

Paste MDX source content.

Choose indentation style.

Click Format.

Review the formatted output.

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.