JSX Formatter Online — Free React JSX Beautifier

Format React JSX with tag-aware indentation, attribute alignment, and configurable spacing. 100% client-side — never uploaded.

Indent

semi align attrs

Input JSX

Formatted Output

What is a JSX Formatter?

A JSX formatter rewrites the whitespace inside React component source so tags align, attributes wrap predictably, and brace nesting reads top-to-bottom. It is a tag-aware variant of a JavaScript pretty printer: ordinary statements are indented like JS, but the <tag>…</tag> structure dictates additional indent levels for the children.

The OpenFormatter JSX formatter is a lightweight, hand-rolled implementation that runs entirely in your browser. Unlike Prettier, it does not parse the full ECMAScript AST — it is a token-aware pass that handles JSX tags, attribute wrap, brace blocks, strings, template literals, and comments. For most snippets — bug-report repros, blog samples, code-review excerpts — it produces output indistinguishable from Prettier in a fraction of the time.

How to format JSX online — 4 steps

Paste your JSX. Drop a React component, an expression container, or any JSX snippet into the Input panel above.
Choose options. Pick a 2-space, 4-space, or tab indent. Toggle semicolons. Toggle attribute alignment for components with many props.
Click Format. The tool rewrites the whitespace client-side and shows the result on the right with a green Formatted badge.
Copy the output. Use the Copy button to put the formatted JSX on your clipboard ready for your editor.

Sample input & output

Before

function Card(props){return(<div className="card" onClick={props.onClick}><h2>{props.title}</h2><Button label="OK"/></div>);}

After

function Card(props) {
  return (
    <div
      className="card"
      onClick={props.onClick}
    >
      <h2>{props.title}</h2>
      <Button label="OK" />
    </div>
  );
}

Tag-Aware Indent

JSX children are indented under their opening tag, with closing tags dedented. Mixed JS + JSX nests cleanly.

Attribute Wrap

Components with two or more attributes wrap one-per-line, with the closing bracket on its own line — Prettier-style.

Configurable

Choose 2-space, 4-space, or tab indent. Toggle semicolons. Toggle attribute alignment per snippet.

Common use cases

check_circleReact component cleanup — beautify minified or copy-pasted JSX
check_circleCode review prep — make a diff readable before opening a PR
check_circleMigrating JSX to TSX — normalise spacing before adding type annotations
check_circleCodebase consistency — match Prettier output for snippets when Prettier is not available
check_circleBug reports & repro snippets — paste readable JSX into GitHub issues and Stack Overflow
check_circleLearning React — turn dense one-line examples into nested, indented form
check_circleTutorial authoring — produce uniform JSX samples for blog posts
check_circleComponent library docs — keep example markup uniform across the docs site

JSX vs HTML, JSX vs TSX

JSX vs HTML

className, not class
htmlFor, not for
Attributes are camelCase: tabIndex, not tabindex
Self-closing tags need an explicit />
Braces { } embed JS expressions — HTML cannot

JSX vs TSX

TSX adds type annotations: (props: Props)
Generics <T> appear after identifiers, not as tags
satisfies, as, type assertions are TSX-only
Use .tsx extension; .jsx for plain React
Use the TSX Formatter when types are present

More React + JS tools

Format, minify, and migrate React code without leaving the browser.

TSX Formatter JSX Minifier JSX to TSX

Frequently Asked Questions

What is JSX?

JSX is a syntax extension for JavaScript created by the React team. It lets you write XML/HTML-like tags directly in JavaScript — <Button label="OK" /> — which a build step (Babel, esbuild, SWC, TypeScript) compiles to React.createElement(Button, { label: "OK" }) calls. JSX is not HTML: className replaces class, htmlFor replaces for, attributes are camelCase, and braces { } embed JavaScript expressions inside markup.

How does the formatter decide between < as a JSX tag and < as a less-than operator?

The formatter uses a context heuristic: a < is treated as JSX if it follows = , ( , , , { , } , ; , > , a newline, or the start of file, AND the next character is a letter or /. A < that follows an identifier, ) , ] , or > is treated as a comparison or generic. This matches what Babel and TypeScript do at parse time.

What does attribute alignment do?

When alignAttrs is enabled and a tag has more than one attribute, each attribute is placed on its own line, indented one level deeper than the tag, with the closing > or /> on its own line aligned to the tag. This is the standard Prettier wrap style for components with many props.

Does the formatter handle self-closing tags and fragments?

Yes. Self-closing tags (<Image src="..." />) keep the leading space before /> per the Prettier convention. Fragments (<>...</>) are recognised — they are treated as tags with empty names, indented and dedented like any other element. Named fragments (<Fragment>) are formatted identically.

Why are some attributes left inline even with alignment turned on?

Tags with a single attribute are left inline because wrapping a one-prop component on three lines hurts readability. The threshold is two or more attributes. If you always want one-per-line — including for single-attribute tags — Prettier with --jsx-bracket-same-line=false enforces that project-wide.

Does it preserve comments and JSX expression containers?

Yes. // line comments, /* block */, JSDoc /** */, and JSX comments {/* ... */} are kept in their original position. Expression containers — {props.title}, {items.map(i => …)} — are tokenised first so their internal braces never trip up the brace-depth counter.

Is my JSX uploaded to your servers?

No. Formatting runs entirely in JavaScript inside your browser. Components containing API keys, proprietary algorithms, or unreleased features never leave the device. You can verify this in DevTools → Network — no requests are made when you click Format.

How is this different from Prettier?

Prettier is a full AST-based printer with hundreds of options and dozens of edge-case fixes. This formatter is a lightweight tag-aware indenter — it rewrites whitespace and brace placement without touching token order. For a one-off readability pass on a snippet, this is faster. For project-wide enforcement, install Prettier and add a pre-commit hook so every file is normalised before it lands.