About the JSX and React Formatter
JSX mixes markup and expressions, and hand-formatting it consistently is tedious: when to wrap attributes, how to indent nested elements, where the closing bracket goes. Prettier settled those questions, and this tool runs Prettier's Babel parser with JSX support to apply them. Modern JavaScript, class components, hooks, fragments and conditional rendering all format as they would in a project with Prettier configured.
Options cover indent, semicolons, quote style for JavaScript strings, and print width. JSX attributes keep double quotes regardless, following Prettier's default. A parse error, such as an unclosed tag or a stray brace, is reported with line and column.
For TypeScript React files use the TypeScript Formatter, which handles TSX. To convert plain HTML into JSX first, the HTML to JSX tool renames attributes and self-closes tags.
How to use
- Paste the component on the left.
- Set the options to match your project's Prettier config.
- Copy the formatted JSX.
Common questions
- Does it support Flow annotations?
- Simple annotations parse with the Babel parser; for full TypeScript use the TypeScript Formatter.
- Why are JSX attribute quotes always double?
- That is Prettier's jsxSingleQuote default. The quote option here applies to JavaScript strings.
- Can it format a whole file with imports and several components?
- Yes. Any valid module formats as a unit.