JSX Formatter

JSX Formatter – Beautify JSX Online

JSX mixes HTML-like markup with JavaScript expressions, and it gets unreadable quickly when a component is written on a single line. The JSX formatter uses Prettier to lay out elements, props, and expressions the way the React community expects.

What you get

• Elements that do not fit on one line are split: each prop on its own line, children indented.
• Self-closing tags get a consistent />.
• Conditional rendering with && and ternaries is wrapped in parentheses and indented.
• .map() callbacks that return JSX are broken into readable blocks.
• Text, expressions, and whitespace between inline elements are preserved correctly — Prettier inserts {" "} where a meaningful space would otherwise be lost.

How to use it

Paste your JSX (a single component or an entire file), or click Sample. Choose your indentation, line width, quote style, and whether to use semicolons and trailing commas. The formatted code appears on the right; copy it or download it as a .jsx file.

Quotes in JSX

JSX attributes conventionally use double quotes (className="card") even in projects that use single quotes for JavaScript strings. Prettier follows that convention: the Single quotes switch changes JavaScript strings, while JSX attribute values keep double quotes unless they contain one.

Common reasons for errors

A formatter needs valid JSX. Typical mistakes are adjacent root elements without a fragment (<>...</>), unclosed tags such as <img> instead of <img />, and class attributes containing braces. The error message shows the line and column so you can fix it quickly.

More React tools

The React Formatter lets you switch between JSX and TSX, the TypeScript Beautifier handles typed components, and the HTML Beautifier is the right choice for plain HTML templates.