Tools
TypeScript Code Formatter
Paste your TypeScript code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the TypeScript formatter
This tool reformats TypeScript source code — indentation, line wrapping, quote style, and semicolons — using Prettier, the same formatter most TypeScript projects run via prettier --write. It parses the full TypeScript grammar: interfaces, generics, enums, as const, satisfies, non-null assertions, and JSX, so it won’t choke on syntax a plain JavaScript parser rejects. Everything runs client-side in your browser; no code is sent to a server, so it’s safe to paste code you can’t share externally.
Under the hood it loads Prettier’s standalone build (prettier/standalone) instead of the Node build, since the Node entry expects filesystem access for .prettierrc discovery that a browser doesn’t have. Parsing uses Prettier’s babel-ts parser — Babel’s TypeScript grammar — paired with the estree printer plugin, both pulled in with a dynamic import() only when this page loads, so the HTML or PHP formatter’s plugins never ship here. babel-ts only parses syntax; it does not type-check, so code with a type error but valid syntax still formats without complaint.
Reach for this when you’ve got minified, copy-pasted, or AI-generated TypeScript that needs to read like a human wrote it, or to sanity-check whether a snippet even parses before it goes into git. Two options are exposed: tab width (1–8 spaces, default 2) and whether to keep semicolons (on by default) — meaningful here since the parser is JS/TS, unlike the CSS or JSON formatters, which ignore it. Quote style isn’t configurable; output always normalizes to double quotes, and line width is fixed at Prettier’s default of 80 characters.
Examples
// Input
interface User{name:string,age:number,email?:string}
function greet(user:User):string{
if(user.email)return `Hi ${user.name}, we'll email ${user.email}`
return `Hi ${user.name}`}
// Output (default: tab width 2, semicolons on)
interface User {
name: string;
age: number;
email?: string;
}
function greet(user: User): string {
if (user.email) return `Hi ${user.name}, we'll email ${user.email}`;
return `Hi ${user.name}`;
}Default options (tab width 2, semicolons on). Optional properties (email?) and template literals print correctly — this is the babel-ts parser, not the plain babel parser the JavaScript formatter uses.
// Input
const msg:string='hi '+name
const cfg={mode:'dark',level:3}
// Output (semicolons off)
const msg: string = "hi " + name
const cfg = { mode: "dark", level: 3 }Turning the semicolon toggle off drops trailing ;. Quote style has no toggle in this tool — single quotes always become double quotes, Prettier’s fixed default.
// Input (id is typed number but assigned a string)
const id:number="42"
function double(n:number):number{return n*2}
// Output (reformatted; the type error is untouched)
const id: number = "42";
function double(n: number): number {
return n * 2;
}id is declared number but assigned a string — a real type error. The formatter only parses and reprints syntax, so it reformats without complaint; catching this needs tsc or your editor’s TypeScript checker.
Frequently asked questions
Does this tool check my TypeScript for type errors?
No. It uses Prettier’s babel-ts parser, which parses TypeScript syntax and reprints it — it doesn’t run a type checker. Code with a real type error, like assigning a string to a number, still formats cleanly as long as the syntax is valid; only tsc or your editor’s TypeScript language service will catch that.
What’s the difference between this and the JavaScript formatter on this site?
The JavaScript formatter uses Prettier’s plain babel parser, which doesn’t understand TypeScript-only syntax — interfaces, type annotations, generics, enum, as const — and throws a parse error on the first one it meets. This tool uses the babel-ts parser instead, so .ts and .tsx source belongs here, not there.
Is my code uploaded anywhere?
No. Formatting runs entirely in your browser using Prettier’s standalone build — the source you paste is never sent to a server, logged, or stored.
Does it handle JSX or .tsx syntax?
Yes. The parser used here doesn’t distinguish files by extension, so JSX elements format correctly alongside TypeScript types and generics in the same input.
Can I set the quote style or line width?
No — only tab width (1–8 spaces) and whether to keep semicolons are exposed. Quotes always normalize to double quotes and line width is fixed at Prettier’s default of 80 characters; run Prettier locally with a .prettierrc file if you need those configurable.