JSX / TSX Prettifier

Format React JSX or TSX with consistent style — self-closing for empty elements, attribute wrapping when too long, balanced indentation. Lightweight (no Prettier dep).

How to use the JSX / TSX Prettifier

Paste JSX or TSX — a component from a chat, gist, or build — and the formatted version appears below with self-closing empty elements, wrapped attributes, and balanced indentation. Copy the result.

Formatting React JSX

JSX mixes JavaScript expressions with XML-like markup, so a component pasted from a chat, a gist, or a minified build often has run-together elements, attributes that overflow the line, and inconsistent indentation that obscures the nesting of components and children. Reading the structure of a deeply composed component in that state is genuinely hard.

This formats JSX or TSX with self-closing tags for empty elements, attribute wrapping when a tag grows too long, and balanced indentation — and it runs entirely in the browser with no Prettier dependency. For general JavaScript or TypeScript beyond JSX, use the JavaScript beautifier; to turn an SVG into a JSX component, the SVG to JSX converter; and to configure Prettier itself for your editor, the .prettierrc generator.

Common use cases

• Format a pasted component — tidy JSX copied from a gist or chat.
• Wrap long tags — break a tag with many attributes onto multiple lines.
• See the nesting — indent a deeply composed component clearly.
• Self-close empties — normalise empty elements to self-closing form.
• No toolchain needed — format JSX without installing Prettier.