Format TypeScript and TSX the way Prettier does
The TypeScript Formatter formats .ts and .tsx code with Prettier 3.9, the formatter most TypeScript, Angular and React teams already use in their editors and CI. Because it uses Prettier’s own TypeScript parser, it understands everything the language allows — generics (including the <T,> trick in TSX), decorators, enums, satisfies, type-only imports, abstract classes, overloads and JSX — rather than treating TypeScript as “JavaScript with extra symbols”.
Set the print width, indentation, quotes, semicolons, trailing commas, bracket spacing and arrow-function parentheses; then read the result or switch to Changes to see exactly which lines were rewritten. An optional Organise imports step runs the TypeScript compiler’s own algorithm — the same one behind VS Code’s “Organize Imports” command.
Formatting happens in your browser. Proprietary code is never uploaded.
How to use the TypeScript Formatter
- Paste code into TypeScript code, drop a .ts or .tsx file on it, or press Load file.
- Leave File type on Auto-detect, or pick .ts or .tsx when your code is ambiguous (see below).
- Choose the style options. They map one-to-one to Prettier options, so you can copy them into a
.prettierrclater. - Press Format code. After that, the output follows your edits and option changes automatically.
- Switch between Formatted and Changes, then copy or download the result.
TypeScript Formatter features
Real TypeScript parsing
Prettier’s typescript-estree parser handles decorators, generics, enums, namespaces, satisfies, assertion functions and JSX exactly as the compiler does.
Prettier options
Print width, 2 or 4 spaces or tabs, single or double quotes (separately for JSX), semicolons, trailing commas, bracket spacing and arrow parentheses.
Diff of changes
A line-by-line diff with line numbers shows every line that was added or removed, so you can review a reformat before committing it.
Organise imports
Optionally sorts imports by module, merges duplicates and removes unused names using TypeScript 5.9’s organizeImports, then formats again.
Precise syntax errors
If the code does not parse, you get the line, column and message plus a code frame pointing at the problem.
Worked example
This one-liner from a TSX file uses a generic arrow function:
export const Row = <T,>({item,onSelect}:{item:T;onSelect:(t:T)=>void}) => <li onClick={()=>onSelect(item)} className="row">{String(item)}</li>
With the default options it becomes a 10-line component: the destructured parameters break one per line because the signature exceeds 80 characters, the inline type gets semicolons between members, the arrow callback gets parentheses (), and the JSX is wrapped in parentheses with {String(item)} on its own line. The trailing comma after onSelect, appears because Trailing commas is set to All. The <T,> comma is kept: in a .tsx file, <T> alone would be read as a JSX tag.
.ts or .tsx: why the file type matters
TypeScript has one syntax that clashes with JSX: the old-style type assertion <string>value. In a .ts file it is a cast; in a .tsx file it would be an unclosed JSX element. Auto-detect looks at the code and tries both readings, which works for almost everything. If you see a confusing error, choose the type explicitly — and prefer value as string, which works in both.
How organise imports behaves
- Unused named and default imports are removed; imports kept only for types stay, and
Reactis kept when the file contains JSX. - Imports from the same module are merged, and names inside braces are sorted.
- Declarations are sorted by module path, packages first. Side-effect imports such as
import "./polyfill"are sorted too — if their order matters, separate them with a blank line, because each blank-line-separated group is organised on its own. - It needs the TypeScript compiler (about 1.5 MB compressed), downloaded only when you tick the option.
Related tools
For HTML, CSS, plain JavaScript and JSON, use the Code Beautifier; to shrink JavaScript for production, the JS Minifier; and to compare two versions of any text, the Diff Checker.
TypeScript Formatter FAQ
Is this TypeScript formatter free and private?
Yes. It is free, needs no account and runs in your browser. Your code is not sent anywhere; only the Prettier library files are downloaded from a public CDN.
Does it produce the same output as Prettier in my project?
Yes, for the same Prettier version (3.9.10) and the same options. Options not shown here keep Prettier’s defaults. If your project pins a different Prettier version, small differences are possible.
Can it format Angular components with decorators?
Yes. Class, property, method and parameter decorators such as @Component, @Input and @Injectable are parsed and formatted as Prettier does.
Why does my TSX generic need a comma, like <T,>?
In .tsx files,
Will formatting change how my code runs?
No. Prettier only changes whitespace, line breaks, quotes, semicolons, parentheses and trailing commas in ways that keep the meaning. Organise imports removes imports that are never used, so check side-effect imports if their order matters.
What happens if my code has a syntax error?
Nothing is formatted. You see the line and column of the first error, the parser message and a code frame, so you can fix it and try again.