TypeScript beautifier - format TS in your browser
TypeScript is JS with types - and more syntax to format: generic types (`<T>`), interfaces, type aliases, decorators, enums. The beautifier uses Prettier with the TypeScript parser (official, maintained by the TS team).
In Gentle mode Prettier does the same thing as `npx prettier --write src/**/*.ts`. In Aggressive (js-beautify) you lose support for some type constructs - js-beautify does not know the TS AST so it sometimes breaks type declarations in odd places. For TS stick with Gentle.
Accepts `.ts`, `.mts`, `.cts`. For `.tsx` there is a separate landing - TSX needs the parser with JSX enabled. Defaults: 100 chars, single quotes, semicolons, trailing commas (`trailingComma: 'all'` - works with type parameters: `function f<T,>(x: T)`).
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 TypeScript situations:
- JS → TS migration. You added types to a file and formatting drifted. Paste, Gentle, full consistency.
- Generated types. Something from `openapi-typescript` or `drizzle` emits TS without indent. Beautify.
- Decorator-heavy code. NestJS, Angular, TypeORM - decorators on every line. Prettier produces a consistent style.
- Pre-PR refactor. After a Find & Replace your TS files have mixed indentation.
- Blog demo. You are writing a snippet for a post - paste, Gentle, copy with full syntax colouring.