JSX Formatter

Paste compact JSX or a minified React component and expand it into readable, indented markup.

Last updated: May 29, 2026

Indent:Preserve blank linesFinal newline

Messy or Minified JSX

1 lines, 130 B

Formatted JSX

function Card({title,items}) {
  return(
  <div className="card">
    <h2>
      {title}
    </h2>
    <ul>
      {items.map(i=>(<li key={i}>{i}</li>))}
    </ul>
  </div>
  );
}

12 lines, 178 B

Input: 1 linesOutput: 12 linesSize: 178 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 JSX Formatter?

JSX Formatter lays out JSX and React component markup so nested elements, expression containers, and surrounding JavaScript are easy to follow. Each element is placed on its own line with consistent indentation, while inline comparisons, for-loops, and destructured props are preserved as written. It is a lightweight, browser-side formatter focused on indentation and line breaks, not a full JavaScript compiler, so it never rewrites your logic.

How to Use JSX Formatter

Paste JSX or a React component.

Choose indentation style.

Click Format.

Review the formatted JSX.

Copy or download the .jsx file.

Common Use Cases

Tidying a minified component copied from a build output or sandbox.
Indenting JSX pasted from a chat message or forum answer.
Making nested element trees readable before review.
Preparing component snippets for documentation or slides.

Example Input and Output

A single-line element tree is expanded with indented children.

Minified JSX

<ul><li>One</li><li>Two</li></ul>

Formatted JSX

<ul>
  <li>
    One
  </li>
  <li>
    Two
  </li>
</ul>

Privacy

JSX is formatted locally in the browser and is not uploaded.

Frequently Asked Questions

Does this validate or compile JSX?

No. It formats text for readability only. Use Babel, ESLint, or your bundler to validate JSX.

Does it understand the difference between a tag and a less-than sign?

Yes. A "<" that follows an identifier or number is treated as a comparison, while one in element position is treated as a JSX tag.

Are destructured props and expression containers preserved?

Yes. Destructured props stay inline and {expression} containers are kept together so the markup stays valid.

Is my code uploaded anywhere?

No. Formatting runs entirely in your browser.

Related Tools

JavaScript Beautifier

Format and beautify minified or messy JavaScript code.

Babel Formatter

Format Babel and modern JavaScript snippets with readable indentation for debugging transformed code.

HTML Beautifier

Format and beautify minified or messy HTML code.

Code Highlighter

Paste code in JavaScript, TypeScript, Python, HTML, CSS, SQL, JSON, or Bash and get a syntax-highlighted HTML snippet you can embed anywhere. Live preview and copy-ready output.

Code to Image Converter

Convert code snippets to beautiful images for sharing.

C Beautifier

Beautify C source snippets by expanding braces and statements into readable, consistently indented code.