gizmobench
BrowseDaily

TypeScript Formatter

This page opens the formatter in TypeScript mode with a typed interface and generic function. Paste standalone TypeScript and adjust the indentation or print width, then copy the formatted source or download formatted.ts. Token spelling, quote style and existing semicolons are kept; star-prefixed block comments can be realigned. Existing line breaks remain. This is layout formatting with lexical checks, not a TypeScript compiler, type checker, Prettier implementation or TSX formatter. A remembered draft stays beneath this page’s example until you edit the source.

formattedtypescript, 2 spaces, width 80
interface User { id: number; name: string; tags?: string[] } function identity<T>(value: T): T { return value } const user: User = { id: 1, name: "Ada" };
Parser
Indent
Columns a bracketed list may fill before it breaks, from 40 to 200.
Idempotent
Yes

9 lines out, 49 tokens, and formatting it again changes nothing.

  • A one-line arrow functionJavaScript parser
    const f = (a, b) => { if (a > b) { return a } else { return b } }
  • That output, formatted againsame settings, second pass
    const f = (a, b) => { if (a > b) { return a } else { return b } }
  • TypeScript under the JavaScript parserthe wrong parser for the file
    Line 1: the interface keyword is TypeScript, not JavaScript. Switch the parser to TypeScript and format again.
What moves, and what does not. Only the whitespace between tokens. A line break you wrote is kept, because a line break can end a statement in JavaScript and taking one out would change the program; runs of blank lines collapse to one. A line break is added only where the grammar reads it as whitespace: inside a block, after a semicolon, after a line comment, and between the items of a bracketed list wider than the print width. Nothing is renamed, no quote is swapped, no semicolon is inserted, and the inside of a string or a template literal is never touched. A comment keeps its words; if it is a block comment whose lines all start with a star, it is realigned to the new indentation.

Up to 1,000,000 characters in one pass, read here in your browser with nothing uploaded, nothing executed and no account. The print width counts columns, with a tab counted as 2; it decides when a bracketed list breaks, and it never rewraps the text inside a string or a comment. The parser, the indent, the width and the draft are kept in this browser alone, drafts up to 200,000 characters, and the Start over button above the tool forgets them.

Accuracy. Layout only: every token comes back exactly as you wrote it, so strings, template literals and comments keep their contents and no semicolon or bracket is invented; the one exception is a block comment whose lines all start with a star, which is realigned to the new indentation. A line break you wrote is kept, only the whitespace between tokens moves, and formatting the result again returns the same bytes. It checks that brackets, strings, comments and regular expressions are closed but parses no further, so a source it formats can still fail to run; nothing is executed, nothing leaves this page, and a source may be up to 1,000,000 characters.

Common questions

Can I format interfaces, type annotations and generics?
Yes. TypeScript mode lays out supported interfaces, annotations and generic signatures without removing them. It preserves the token text and reports unclosed strings, comments and brackets; it does not check whether a type exists or an assignment is correct.
Can it format TSX or compile TypeScript to JavaScript?
No. JSX/TSX content is outside this formatter’s scope, and TypeScript syntax is kept in the output. Use a TypeScript compiler for JavaScript output and a JSX-aware formatter for TSX.
Does it use Prettier or editor configuration?
No. This browser formatter has its own scanner and printer. It provides 2-space, 4-space or tab indentation and a 40–200-column print width for bracketed lists. It does not load prettier configuration, install an npm package or format a whole project.
Will this page overwrite my remembered JavaScript settings?
Visiting the page leaves remembered choices and the draft untouched. Changing one control saves that choice immediately while keeping untouched remembered settings. Editing the source saves that new draft on this device, up to 200,000 characters.

Layout only: every token comes back exactly as you wrote it, so strings, template literals and comments keep their contents and no semicolon or bracket is invented; the one exception is a block comment whose lines all start with a star, which is realigned to the new indentation. A line break you wrote is kept, only the whitespace between tokens moves, and formatting the result again returns the same bytes. It checks that brackets, strings, comments and regular expressions are closed but parses no further, so a source it formats can still fail to run; nothing is executed, nothing leaves this page, and a source may be up to 1,000,000 characters.