JSX Formatter

Format React components and JSX so props, nesting and hooks line up.

Format as

Input

Formatted output

What you can do here

JSX formatter for React components
React formatter for .jsx and .tsx files
Also formats JavaScript, TypeScript, HTML, CSS and 15 more languages from the menu
Nothing is uploaded

Formatting JSX and React code

Paste a React component, choose JavaScript (or TypeScript for .tsx) and click Beautify. The code is re-indented with consistent spacing so nested JSX, props and hooks are easy to read. It only changes whitespace and line breaks, so the component behaves exactly the same.

Common questions

Is a React formatter different from a JSX formatter?

No. React components are written in JSX, so formatting a React file is formatting JSX.

Does formatting change how my component works?

No. Only whitespace and line breaks change.

Can I format TSX?

Yes. Choose TypeScript in the menu.