JavaScript & TypeScript Formatter & Beautifier
A JavaScript beautifier and formatter: format, beautify or prettify JavaScript and TypeScript online using Prettier. Fix indentation, enforce consistent semicolons and quotes, and minify JavaScript for production with Terser.
What does a JavaScript formatter do?
A JavaScript formatter parses your source code into a syntax tree and prints it again with consistent layout: indentation, spacing around operators, line breaks, quote style and semicolons. Because it works from the parsed code rather than the raw text, it never changes what the program does — and if the code does not parse, it tells you where the problem is instead of guessing. The language itself is defined by the ECMAScript specification; TypeScript adds type syntax on top of it.
This page runs the real Prettier 3 engine for Beautify (its babel parser for JavaScript, its typescript parser for TypeScript) and Terser 5 for Minify. Consistent formatting removes a whole category of review comments and diff noise, and makes code from different authors read as if it belongs together.
How to use the JavaScript formatter
- Paste code into the Input pane, or click Upload File to load a
.js,.ts,.jsxor.tsxfile. - Choose Language: JavaScript or TypeScript.
- Set Semicolons, Quotes and Indent to match your project's style.
- Click Beautify to format, or Minify to compress JavaScript for production.
- Use Copy or Download (saved as
formatted.jsorformatted.ts), and Clear to start again.
Options explained
- Language — JavaScript uses Prettier's Babel parser, which also understands JSX. TypeScript uses the TypeScript parser, which handles interfaces, generics, type annotations and TSX. Selecting TypeScript disables Minify.
- Semicolons — Add ends every statement with a semicolon; Remove omits them and only keeps the ones needed to stop two lines being read as one.
- Quotes — Single or Double for string literals. Prettier still picks the other quote if that means fewer escapes, so
"it's"stays in double quotes even with Single selected. - Indent — 2 spaces, 4 spaces or a tab per level.
Other Prettier settings use their defaults: an 80-character print width, trailing commas wherever they are valid, and brackets around arrow-function parameters, e.g. (i) => i.qty. Comments are kept by Beautify.
Minify runs Terser with compression and name mangling switched on. It removes whitespace and ordinary comments, shortens local variable and parameter names, and simplifies expressions where that is safe. Top-level names such as a global function are left as they are, and comments starting with /*! (typically licence headers) are preserved.
Examples
| Input | Action and options | Output |
|---|---|---|
function add(a,b){return a+b} | Beautify, defaults | function add(a, b) { |
const user={name:"Ada",tags:["a","b"]} | Beautify, Single quotes | const user = { name: 'Ada', tags: ['a', 'b'] }; |
interface User{id:number;name?:string} | Beautify, TypeScript | interface User { |
function add(a,b){return a+b} | Minify | function add(n,d){return n+d} |
/*! MyLib v1 | MIT */ function twice(x){/* doubles */return x*2} | Minify | /*! MyLib v1 | MIT */ |
A longer chain is split one call per line once it no longer fits in 80 characters:
const total = items
.filter((i) => i.qty > 0)
.map((i) => i.price * i.qty)
.reduce((a, b) => a + b, 0);Common errors and how to fix them
When the input cannot be parsed, the error appears above the panes and in the Output pane, prefixed with Invalid JavaScript: or Invalid TypeScript:. The message comes from the parser library, with the line and column in brackets.
| Message or symptom | Likely cause | Fix |
|---|---|---|
Unexpected token, expected "," | An unclosed {, ( or [, or a missing comma in an object or argument list. | Go to the reported line and column and close the bracket or add the comma. |
Unexpected token pointing at an interface or a : type annotation | TypeScript code with Language set to JavaScript (type annotations in parameters can also produce expected ","). | Switch Language to TypeScript. |
Unexpected token: punc (:) after Minify | Terser was given type annotations; it only parses JavaScript. | Compile the TypeScript to JavaScript first (for example with tsc), then minify the output. |
| Minify button is greyed out | Language is set to TypeScript. | Switch to JavaScript, with plain JavaScript in the input. |
| Output joins two lines unexpectedly | A line starting with [ or ( continues the previous statement when there is no semicolon. | Add the missing semicolon in the source; see below. |
The last row is worth knowing about. Without a semicolon, const a = 1 followed by a line starting [1,2].forEach(n => n) is one statement in JavaScript, and Prettier prints exactly how it is parsed: const a = (1)[(1, 2)].forEach((n) => n);. If formatted code looks strange, it is usually showing you a real bug.
Frequently asked questions
What is the difference between a JavaScript formatter, beautifier and prettifier?
None that matters: all three names describe re-indenting code and normalising spacing, quotes and line breaks without changing what it does. "Format JS", "beautify JavaScript" and "prettify JS" are the same request, and this page answers it with Prettier, the formatter most JavaScript projects already use. A minifier such as Terser does the reverse.
Will the output match Prettier in my editor or CI?
It should, as long as your project uses the same options. This page runs Prettier 3 with the four options shown and Prettier's defaults for everything else; a project .prettierrc with a different print width or trailing-comma setting will produce different line breaks.
Why can't I minify TypeScript here?
Terser parses JavaScript only. Type annotations, interfaces and generics are not part of the JavaScript grammar, so they have to be removed by the TypeScript compiler (or a bundler) first. Compile to JavaScript, then minify the result here.
Does Beautify change how my code behaves?
No. Prettier only changes formatting — layout, quotes, optional brackets, semicolons and similar details — and it parses the code before printing it, so the formatted program is equivalent. Minify also aims to preserve behaviour, but it renames local variables and rewrites expressions, so test the minified file before shipping it.
Can I format JSX and React components?
Yes. With JavaScript selected, the Babel parser handles JSX; with TypeScript selected, TSX works too. Minify does not accept JSX, because Terser expects code that has already been compiled to plain JavaScript.
Is minified JavaScript the same as obfuscated JavaScript?
No. Minification shortens code for download size, and running Beautify on minified code makes it readable again (apart from the shortened local names). Obfuscation deliberately restructures code to make it hard to understand, which is a different goal with different tools.
Is my code uploaded anywhere?
No. Formatting and minifying run in your browser. The page loads the Prettier and Terser libraries from cdn.jsdelivr.net, but the code you paste or upload is processed locally and is not sent to a server by the tool.