TypeScript Formatter Online
Beautify or minify TypeScript instantly in your browser.
When a TypeScript formatter is the right tool
TypeScript files often arrive with mixed indent, or as a one-line paste from a log. This page is for a first tidy-up or a compact copy: choose Beautify or Minify, pick 2- or 4-space indent in Beautify mode, and watch the output update as you type. Load Sample pastes a short User interface and agreet function if you want to try that first.
The rewriter is not TypeScript-aware. It is the same approach as the JavaScript Formatter, so parameter lists, array types, and regular expressions can come out poorly. Use a local formatter when you need a consistent project style.
Use cases
Reading a compact function or interface
Beautify breaks at braces, brackets, parentheses, commas, and semicolons. A one-line function is easier to scan afterward, but typed parameter lists will usually be split across several lines, and you may see an extra space of indent inside a block.
Compacting a snippet
Minify strips comments and most whitespace, while keeping a space between identifiers. Types written as words, such as user: User, stay on one line in Minify mode because the colon is not a break character.
A quick indent pass, not a compiler
Nothing is type-checked. Decorators, enums, and namespaces are just text. If the file is plain JavaScript, the JavaScript Formatter is the closer match for the sample, but the algorithm is the same.
How formatting works
Empty or whitespace-only input leaves the output empty. The walk tracks strings, backticks, and comments, then inserts or removes whitespace at the punctuation listed above. You can copy the result when it is present.
function greet(user: User): string { return user.name; }
function greet(
user: User
): string {
return user.name;
}The User annotation stays with the parameter because it contains no break characters. The body indent may be one space deeper than the 2-space setting, and a blank indented line can appear before the closing brace.
const users: User[] = [];
const users: User[
] = [
];User[] is treated like an array literal. Generics that only use angle brackets, such as id<T>, usually stay together.
What this tool does not do
It does not parse TypeScript, type-check, or preserve regex literals during Beautify. Nothing is sent to a server. For JSON, use the JSON Formatter. For stylesheets, use the CSS Formatter.
How to use TypeScript Formatter
- Paste your TypeScript, or use Load Sample for a short example.
- Choose Beautify or Minify. In Beautify mode, pick 2- or 4-space indent.
- Copy the result when it looks right, or Clear to start over.
Frequently asked questions
Does this page parse TypeScript?
No. Beautify and Minify are the same kind of character rewriter used on the JavaScript Formatter. They track quoted strings, template literals, and // or /* */ comments, and they break or squeeze text at { } [ ] ( ) , and ;. Type annotations, interfaces, generics, and decorators are not understood as TypeScript. There is no tsc, no Prettier, and no syntax check.
How are types and generics treated?
They are ordinary text. Angle brackets in a generic such as id<T> usually pass through, because < and > are not special characters here. Commas in parameter lists and in generic argument lists still start new lines. A type such as User[] is split because [ and ] are treated as brackets, producing User[ on one line and ] on the next.
Will regular expressions survive Beautify?
Often not. A regex is not treated as a literal, so [ ] { } ( ) and commas inside a pattern can be rewritten as if they were code. Minify usually leaves those characters alone and only strips comments and extra whitespace outside strings.
What does Minify change?
It strips // and /* */ comments, then removes whitespace except for a single space when two identifier characters would otherwise touch. Strings and template literals are copied through. Nested backticks inside a template can confuse the string tracker in both modes.
Is my TypeScript sent to a server?
No. Formatting runs in your browser as you type. Closing the tab discards what you pasted. Do not paste sources that contain secrets if you would not be comfortable with them sitting in memory on this device.
Is there a file size limit?
There is no server-imposed limit, because nothing is uploaded. A few thousand lines is comfortable. A very large file can make the tab feel slow; in that case, format a smaller excerpt or use a local tool.
Related tools and guides
References
- The TypeScript compiler and tools such as Prettier parse the language. This page does not, so array types, comma lists, and regex literals can be rewritten incorrectly.