TSX beautifier - format TSX in your browser
TSX is TypeScript + JSX - the typical React file in a modern project (`.tsx`). The beautifier uses Prettier with the typescript parser (JSX is enabled by default there).
It combines the rules from TS (formatting generic types, interfaces, type aliases) and JSX (attributes on their own lines, self-closing with space, fragments). Default settings: 100-char width, single quotes in JS code, double in JSX props, trailing commas everywhere (works with generic parameters: `function f<T,>(x: T)`).
Accepts `.tsx`. For plain TS without JSX we have a TypeScript beautifier - in some projects (NestJS, Node-only backend) it is slightly better, because the TS parser without JSX is marginally faster.
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 TSX situations:
- Component refactor. After splitting a component into sub-components the indentation drifted.
- Generated TSX. From a type generator (`openapi-typescript`, `graphql-codegen`) you got unformatted code.
- Next.js page. Your `app/page.tsx` has 200 lines after adding Suspense + SSR - beautify.
- Migrating from JSX. You added types to `.jsx` and renamed to `.tsx` - reformat to the new style.
- Storybook stories. `Story.tsx` with props in argSlot - Prettier gives consistent output.
Questions and answers
Because TS without JSX does not parse `<div>...</div>` - it would treat it as a type assertion. Rule: any file with React → `.tsx` + this beautifier. Files without JSX (utils, types) → `.ts` + TypeScript beautifier.