TypeScript Code Formatter
Format and beautify TypeScript (.ts/.tsx) source with real Prettier — consistent indentation, quote style, semicolons and trailing commas. Free and private in your browser; also available as a paid API.
Input
Formatted code
Paste TypeScript and press Format — formatting runs entirely in your browser.
Guides
Paste messy, minified, or inconsistently styled TypeScript and get clean, consistently formatted .ts/.tsx source back. The TypeScript Code Formatter runs the real Prettier engine — the same opinionated formatter used across the JavaScript/TypeScript ecosystem — entirely in your browser, with nothing uploaded.
What it does
Prettier parses your source into a full syntax tree (interfaces, generics, enums, decorators, JSX and all) and re-prints it from scratch with a consistent, opinionated style, rather than patching up your existing whitespace. That means indentation, line wrapping, quote style and punctuation come out uniform no matter how the input was formatted going in.
How to use it
- Paste your TypeScript into the input box, or click Try an example to load a sample snippet.
- Adjust the format options to taste.
- Press Format. The result appears on the right, ready to Copy or Download as a
.tsfile.
Format options
- Indent width — 2 or 4 spaces.
- Use tabs instead of spaces — switch indentation to tab characters.
- Add semicolons — on by default; turn off for an ASI (no-semicolon) style.
- Use single quotes — off uses double quotes, Prettier's default.
- Trailing commas — all (Prettier's default, including function arguments), ES5 (objects and arrays only), or none.
- Print width — a soft target for line length; Prettier decides how to wrap around it.
Free in your browser, private by default
Formatting runs on Prettier's standalone browser build — your code is compiled and re-printed on your device and is never uploaded.
Is there an API?
Yes. The same formatter is available as a paid developer API (POST /v1/tools/typescript-formatter) for formatting TypeScript in a script, CI job, or backend where running a browser isn't practical. The API costs one credit per call; the in-browser tool on this page stays free.
Does it handle .tsx (JSX)?
Yes — the same parser understands JSX, so component files format correctly without a separate mode.
Will it change what my code does?
No. Prettier only changes formatting — whitespace, line breaks, quote style, and punctuation like semicolons and trailing commas. It never renames anything, reorders logic, or removes code. If your source has a syntax error, the tool reports it instead of guessing.
Why not a hand-rolled formatter, like some of our other language formatters?
Prettier already is the de facto standard TypeScript formatter, so this tool wraps it directly rather than reimplementing its rules — you get byte-for-byte the same output you'd get from running Prettier locally.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/typescript-formatter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"inputText": "interface User{id:number,name:string,active?:boo…",
"indentWidth": "2",
"useTabs": "",
"semicolons": "true",
"singleQuote": "",
"trailingComma": "all",
"printWidth": "80"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `typescript-formatter` tool (TypeScript Code Formatter) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.