TSX Formatter Online — Free React TypeScript Beautifier

Format React TSX with type-aware logic that preserves generics, satisfies, and as-assertions. 100% client-side — never uploaded.

Indent

semi align attrs

Input TSX

Formatted Output

What is a TSX Formatter?

A TSX formatter is a tag-aware pretty printer for files with the .tsx extension — React components written in TypeScript. It indents JSX children under their tag while preserving every TypeScript construct: interface, type, generics like Array<T>, satisfies, and as assertions. The hard problem it solves is the angle-bracket ambiguity — disambiguating <Foo> as a JSX tag from <T> as a generic argument list.

The OpenFormatter TSX formatter is a hand-rolled, browser-side tool. It tokenises strings, template literals, and comments first so brace and angle-bracket counters stay accurate, then applies a context-sensitive heuristic to classify each <. The result mirrors what TypeScript's parser does internally — a generic opens after an identifier, ), ], or >; a JSX tag opens after =, (, ,, {, }, or a newline.

How to format TSX online — 4 steps

Paste your TSX. Drop a React TypeScript component or any .tsx snippet into the Input panel.
Choose options. 2-space, 4-space, or tab indent. Toggle semicolons. Toggle attribute alignment.
Click Format. The formatter rewrites whitespace client-side, keeping every generic and assertion intact.
Copy the output. Use the Copy button to put the formatted TSX on your clipboard.

Sample input & output

Before

function Card<T extends string>(props:Props):JSX.Element{return(<div className="card"><Button<T> label="OK"/></div>);}

After

function Card<T extends string>(props: Props): JSX.Element {
  return (
    <div className="card">
      <Button<T> label="OK" />
    </div>
  );
}

Type-Aware

Preserves generics, satisfies, as-assertions, and decorators. The angle-bracket ambiguity is resolved with a parser-grade heuristic.

Tag-Aware Indent

JSX children indent under their opening tag. Mixed TS + JSX nests cleanly with consistent depth tracking.

Configurable

2-space, 4-space, or tab. Toggle semicolons. Toggle multi-attribute alignment per snippet.

Common use cases

check_circleReact + TypeScript component cleanup — beautify .tsx after copy-paste
check_circleCode review prep — make a TSX diff readable before opening a PR
check_circleMigrating JSX to TSX — keep types intact while normalising spacing
check_circleCodebase consistency — match Prettier output for snippets when Prettier is not available
check_circleBug reports — paste a readable TSX repro into a GitHub issue
check_circleTutorial authoring — produce uniform TSX samples for blog posts
check_circleLearning React + TS — turn dense generic-heavy examples into nested form
check_circleComponent library docs — keep example markup uniform across the docs site

JSX vs HTML, JSX vs TSX

JSX vs HTML

className, not class
htmlFor, not for
Attributes are camelCase: tabIndex
Self-closing tags need an explicit />
Braces { } embed JS expressions

JSX vs TSX

TSX adds type annotations: (props: Props)
Generics <T> appear after identifiers
satisfies, as, type assertions are TSX-only
Use .tsx extension; .jsx for plain React
This formatter recognises both forms

More React + TS tools

Format, minify, and migrate React TypeScript code without leaving the browser.

JSX Formatter JSX to TSX TypeScript Formatter

Frequently Asked Questions

What is the difference between JSX and TSX?

JSX is a syntax extension for JavaScript; TSX is the same syntax inside a TypeScript file. The .tsx extension tells the compiler to parse JSX while also accepting TypeScript constructs — interfaces, type aliases, generics, satisfies, as assertions, and decorators. The runtime output is identical: both compile to React.createElement (or jsx-runtime) calls. The TSX formatter knows about both.

How does the formatter tell a generic from a JSX tag?

A heuristic: < is treated as the start of a generic argument list when it directly follows an identifier character, ), ], or >. It is treated as the start of a JSX tag when it follows = , ( , , , { , } , ; , a newline, or the start of file, AND the next character is a letter or /. This matches the resolution order used by the TypeScript parser. Edge cases like Component<T> as a JSX tag with explicit type args are handled because the < follows a letter and the formatter falls through to JSX context only when surrounding code permits it.

Does it preserve satisfies, as casts, and angle-bracket assertions?

Yes. satisfies, as, and as const are kept as-is on the same line as their expression. Angle-bracket type assertions (<Foo>x) are not used inside .tsx files because they conflict with JSX — the TypeScript compiler itself rejects them. The formatter assumes idiomatic TSX (the as form) and does not rewrite assertion style.

Will the formatter add or remove type annotations?

No. The formatter is whitespace-only — it never inserts, removes, or rewrites a token. Annotations stay exactly as you wrote them. To add interfaces from inferred props, use the JSX to TSX tool instead.

Does it handle generic React components like <Select<Option> value={x} />?

Yes — explicit generic arguments on a JSX tag are recognised because the parser collects everything between the tag-name and the next > or />. The angle brackets inside the attribute area are part of the tag header, not nested JSX, so depth counting is not affected.

Why is some output different from Prettier?

This formatter is a lightweight tag-aware indenter — it preserves token order and only rewrites whitespace. Prettier re-prints the AST: it normalises quote style, enforces a print width, splits long expressions across lines, and applies trailing commas. For project-wide enforcement install Prettier and add a pre-commit hook. For one-off snippet readability, this tool is faster and runs without a build step.

Is the TSX I paste sent to your servers?

No. Formatting runs entirely in JavaScript inside your browser. Code containing API keys, proprietary algorithms, or unreleased features never leaves the device. You can verify this in DevTools → Network — no requests are made when you click Format.

Does it handle decorators on class components?

Yes. Decorators (@Component({ … }), @Inject(TOKEN)) are kept on their own line above the decorated declaration. The brace depth counter understands the decorator argument parentheses and braces correctly.