TypeScript Prettier - format TS and TSX in your browser
A TypeScript formatter takes source that is minified, hand-indented or pasted out of a chat window and prints it again in one consistent style. This one does the job the way your editor does: it parses the code into a real syntax tree and prints that tree from scratch, so the output is decided by the language structure rather than by counting braces. Everything happens inside your own browser tab.
Why an AST-based beautifier matters for TypeScript
Plain JavaScript beautifiers routinely break on TypeScript because so much of the syntax is invisible to them. A generic constraint such as <T extends keyof U> looks like a comparison operator. A conditional type looks like a ternary. A decorator looks like a stray expression. Reading the file properly is what lets the printer keep type annotations, interfaces, index signatures, union and intersection types, mapped and template-literal types, enum, namespace, ambient declare blocks, parameter properties, satisfies, as const and non-null assertions intact.
The same parse gives you a free syntax check. Paste something that does not compile and you get the exact line, the exact column and a caret pointing at the token that confused the parser, which is often faster than waiting for a build.
The options, and what they actually change
Print width is a target rather than a hard limit: the printer fits what it can on a line and breaks the rest. Lowering it to 40 is the quickest way to see a long union type explode into one member per line with a leading pipe. Indent style and indent size, semicolons, quote style and trailing commas are the settings teams argue about; picking one here and exporting the matching .prettierrc ends the argument with a file instead of an opinion. Trailing commas set to all keep version-control diffs to a single line when a parameter list grows.
Modes for different jobs
Format is the everyday pretty-printer. Compact lifts the column limit so a snippet squeezes into a narrow blog column - it is not a minifier, and identifiers and comments survive untouched. Declaration handles .d.ts files and lists the top-level API surface it finds. Diff shows line by line what the formatter would touch before you copy anything back. Validate parses without printing, for when you only want to know whether a snippet is legal.
The three options that rewrite your file
Printing only ever moves whitespace around. Three switches genuinely change content, and each is built to fail safe. Remove comments deletes comments using positions reported by the parser, so a // inside a string or a regular expression is never mistaken for one; triple-slash references, @ts-expect-error, @license and @preserve survive because a compiler or bundler reads them. Sort imports groups packages, then @/ aliases, then relative paths, and treats a side-effect import such as import "./polyfill" as a fixed point that nothing may move past. Preserve blank lines, when switched off, leaves blank lines inside template literals alone, because there the blank line is part of the string. After each of these the result is parsed again, and the step is abandoned with a warning rather than handing back code that no longer compiles.
interface onto a single line no matter how wide the column.typescript or babel-ts?
The typescript parser follows the compiler's own grammar and is the right default. babel-ts is more forgiving and will sometimes accept proposal syntax or a fragment the first one rejects, but it resolves a few generic-versus-JSX ambiguities differently. If a <T> cast is misread as a JSX tag, switch back. JSX itself is detected from the parsed tree rather than guessed at, so a TSX formatter run gets proper attribute wrapping, self-closing tags and parenthesised multi-line returns.
tsc.Privacy and limits
The parser and printer are fetched once and then run locally; no source is uploaded or logged, which matters when a snippet carries internal package names, API routes or a key nobody remembered to strip. Input is capped at 2 MB, above which the tab would stall while it works, and live formatting pauses on very large files so typing stays smooth. Copy the result, download it as .ts or .tsx, export the diff, or take the generated .prettierrc back to your own repository.