CodesBeautify

React Formatter

Format a React component so the JSX tree, the hooks above it and the props inside it all wrap the way your editor would on save.

React component
Formatted component
Runs locally in your browser

About the React Formatter

React files mix two grammars, and the interesting formatting decisions all happen where they meet. This page parses the component and reprints it, so a JSX element that fits on one line stays on one line, and one that does not gets each attribute on its own row with the closing bracket aligned under the opening tag. A multi line return value is wrapped in parentheses automatically, which is the rule that trips up hand formatting most often.

Expression containers keep their braces tight, so {item.sku} never gains inner spaces. Conditional rendering with the logical and operator, ternaries inside JSX, mapped lists and fragments written as empty angle brackets are all laid out with the nesting made visible. Hook calls above the return statement are wrapped at the line width you choose, with dependency arrays kept on one line where they fit.

Set Quotes to your project style. JSX attribute values keep double quotes regardless, matching the HTML convention that React tooling follows, while string literals in the JavaScript half follow your choice. Semicolons can be switched off for a semicolon free codebase.

A component written in TypeScript will not parse here because type annotations need a different grammar; send it to the TypeScript Formatter instead. For plain markup you want to turn into JSX in the first place, HTML to JSX does the attribute renaming for you.

How to use

  1. Paste a .jsx file or a single component into the left pane, or press Sample to load a table component with a filter input.
  2. Set Max line width to the print width in your prettier config so the output matches your repository.
  3. Adjust Semicolons and Quotes if your project differs from the defaults.
  4. Review the wrapped JSX, then Copy it back into your editor or Download the file.

Common questions

Why does my return statement now have parentheses around the JSX?
When JSX spans more than one line it has to be parenthesised, otherwise automatic semicolon insertion can end the return statement early. The formatter adds them for you.
Can I format a TypeScript component here?
No. Annotations, interfaces and generics need the TypeScript parser. Use the TypeScript Formatter for .tsx files.
Are my prop attribute quotes changed?
JSX attributes stay in double quotes because that is what React tooling and the HTML convention expect. The quote setting applies to ordinary string literals in the JavaScript part of the file.
Does it reorder imports or props?
Never. Order is meaningful in JavaScript, so only whitespace and line breaks are decided by the formatter.