TypeScript Formatter
Format and beautify TypeScript code
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
This is a lightweight indentation-based formatter, not a full AST-based formatter like Prettier — review output for complex generic types.
About this tool
This re-indents TypeScript or JavaScript by tracking braces and statement ends, giving each nesting level consistent indentation and putting every statement on its own line. That is the change that makes a minified or badly pasted file readable again, and it is enough to review code you have been handed in a chat message or a bug report. It is worth being clear about what it is not: it does not re-wrap long lines at a print width, normalise your quotes, or add trailing commas the way Prettier does. Prettier discards your formatting entirely and re-prints from a parsed syntax tree; this works on the text you give it. For a project you own, configure Prettier in the repo so formatting is enforced for everyone. Use this for the code you cannot easily run a formatter over. Strings, template literals and comments are tracked properly, so braces and semicolons inside them are left alone - and everything happens in your browser, which matters when the snippet came from a private codebase.
How to use this tool
- Paste your TypeScript or JavaScriptMinified, badly indented, or pasted out of a chat window - all are fine.
- Choose Format or MinifyFormat re-indents for reading. Minify strips comments and extra whitespace.
- Set your indent sizeTwo spaces is the TypeScript convention; four is common in other codebases.
- Copy or download the resultThen paste it into your editor, where your real formatter can take over.
When to use a quick TypeScript formatter
This formatter fixes indentation and line breaks, which is what makes code pasted from a chat message, a bug report or a minified bundle readable again. It does not change what the code does and does not check types.
For a project, configure Prettier with a shared config so everyone’s editor formats the same way; use this page for the one-off snippets that are not in your repository.
Key features
- Makes minified or badly indented code readable in one step.
- Handles strings, template literals and comments correctly, so their contents are never reformatted.
- Works on plain JavaScript as well, since TypeScript is a superset of it.
- Runs entirely in your browser - proprietary code is never transmitted.
- No install, no config file, no account.
Common uses
- Reading a minified bundle well enough to find the failing function.
- Cleaning up a snippet pasted from Slack or a GitHub issue before reviewing it.
- Formatting code on a machine where you cannot install Node and Prettier.
- Tidying a quick example before pasting it into documentation.
- Stripping comments from a snippet you are about to share publicly.
Tips for better results
- For any repository you control, add Prettier and a format-on-save hook. A tool you have to remember to visit will never keep a codebase consistent.
- Use two-space indentation for TypeScript unless your project says otherwise - it is the ecosystem default and keeps diffs small.
- After formatting a minified bundle, use your editor's "go to line" to reach the point named in the stack trace.
- The minify mode strips comments but does not rename anything, so the output stays debuggable - it is not a substitute for esbuild or Terser in a build.
- Run the result through your compiler afterwards. Formatting cannot introduce type errors, but it also cannot tell you about the ones already there.
Mistakes to avoid
- Expecting Prettier's output. This re-indents your text; it does not re-print from a syntax tree, so long lines stay long and quote style is untouched.
- Treating minify mode as a build step - it removes comments and whitespace but does not rename identifiers, so the size saving is small.
- Assuming formatting validates the code. Syntactically broken input is re-indented, not rejected.
- Using it instead of a repo formatter config, which leaves the codebase inconsistent between contributors.
- Pasting a whole large bundle and expecting instant results - very large inputs take a moment because every character is scanned.
Frequently asked questions
No. Only whitespace, indentation and line breaks change. Logic, types and behaviour are identical, and string and template-literal contents are left exactly as they were.
Prettier parses your code into a syntax tree, throws your formatting away and re-prints it - which is why it can re-wrap long lines and normalise quotes. This works on the text directly, fixing indentation and statement breaks. Use Prettier in projects you control; use this for code you have merely been handed.
No. It never parses types. Run tsc or your IDE for type checking - formatting and type checking are separate jobs.
Yes. TypeScript is a superset of JavaScript, and the formatter works on braces and semicolons, so JavaScript, JSX and JSON all re-indent correctly.
No. It is processed in your browser, which is the point for anyone pasting code from a private or client codebase.
Comments and redundant whitespace. It does not shorten variable names or restructure code, so the output remains readable and safe - a real minifier in your build pipeline will always produce a much smaller file.
Add a formatter such as Prettier to the project with a shared config and run it on save or in a pre-commit hook. This page is for quick one-off clean-ups; a project-wide tool stops style debates in code review.
Simple JSX is indented by brace and tag structure, but complex nested markup is better handled by Prettier, which understands JSX syntax fully.
When code arrives minified in a log, squashed into one line in a chat message or copied from a web page, re-indenting it here is the fastest way to read it before deciding whether it belongs in your editor at all.