JSX Formatter
Format JSX and React components with a real JavaScript parser rather than pattern matching. Attributes wrap one per line once they no longer fit, embedded expressions are formatted as JavaScript, and multi-line JSX returned from a component is wrapped in parentheses so automatic semicolon insertion cannot break it. Print width, quote style and semicolons are all adjustable, and a syntax error is reported with its line and column.
How it works
Formats React components: attributes are wrapped one per line once they no longer fit, embedded expressions are formatted as JavaScript, and multi-line JSX returned from a component is wrapped in parentheses so automatic semicolon insertion cannot break it.
JSX is JavaScript with extra expression syntax rather than a separate language, so the whole file is parsed as one program — a syntax error anywhere is reported with its line and column instead of producing a half-formatted component.
Everything runs in your browser — nothing you paste is sent to a server.
Frequently asked questions
Why does multi-line JSX get wrapped in parentheses?
A return statement followed by a newline is subject to automatic semicolon insertion, which would make the function return undefined instead of the element below it. Wrapping the JSX in parentheses is what stops that, so the formatter adds them whenever the element spans more than one line.
Does this handle TSX as well?
JSX inside TypeScript is better served by the TypeScript formatter, which understands the type-level syntax too. This tool parses as JavaScript, so a file with type annotations should go through the TypeScript formatter instead.
When do attributes get put on separate lines?
Attributes stay on one line while the element fits within the print width, and break to one per line once it does not. Raising the print width keeps more elements on a single line.
Are expressions inside braces formatted too?
Yes — the whole file is parsed as one program, so an expression embedded in JSX is formatted with the same rules as any other JavaScript, including nested JSX inside it.
What happens if my component has a syntax error?
Formatting parses first, so an error is reported with its line and column and the original is left untouched — rather than producing a half-formatted file you then have to repair.
Related tools
JavaScript Formatter & Beautifier
This JavaScript formatter reparses your code and prints it from the syntax tree, so the result is predictable.
TypeScript Formatter
This TypeScript formatter handles interfaces, generics, decorators and TSX, not just the JavaScript underneath.
HTML to JSX Converter
This HTML to JSX converter fixes the attribute names and syntax React insists on.