JSX beautifier - format JSX in your browser
JSX is the React syntax - HTML-like markup embedded inside JS. The beautifier uses Prettier with the Babel parser + JSX. Same as `npx prettier --write src/**/*.jsx`.
Prettier for JSX has its own rules: short elements stay on one line (`<Button>Save</Button>`), long ones with props break line by line, each attribute on its own. Fragments are collapsed/expanded, spaces around `{ }` in expressions are normalised, single ↔ double quotes in props (`prop='x'` → `prop="x"` is JSX standard, but if your strings have apostrophes use `{'string'}`).
Accepts `.jsx`. For TypeScript JSX (`.tsx`) pick the separate landing - it needs the TS parser with JSX enabled.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five JSX situations:
- Component refactor. After pulling props into their own line the indentation drifted.
- Generated JSX. From Storybook, Figma or a mock generator you got ugly single-line JSX.
- React 17 → 18 migration. After a Find & Replace for fragments (`<></>` instead of `React.Fragment`) you need to reformat.
- Code review. Junior pushed a component with 300-char attribute lines.
- Blog / tutorial demo. Paste, Gentle, copy with syntax highlighting.
Questions and answers
Because the total element width exceeds printWidth (default 100). Raise it in Settings to 120, or lower to 80 (popular in some team style guides).