JavaScript beautifier
Paste minified or badly indented JavaScript and get readable code with one statement per line. It is a re-indenter, not a full formatter like Prettier, and it only changes whitespace.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste JavaScript into the left box.
- Choose 2 spaces, 4 spaces or a tab.
- Copy the formatted code. If a bracket or string is not closed, the tool shows the line and column.
What it does
- Adds a line break after
; and {, and before }, except inside for (;;) headers.
- Indents every line by the brackets that are open around it. Calls like
on("x", function () { ... }) nest once, not twice.
- Keeps
} else {, } catch {, } finally { and } while (...) on the closing line.
- Indents
case bodies inside switch, and a statement that continues on the next line, such as .then() chains.
- Writes one space around binary operators, after commas, and none inside brackets or after
!, -x and ++i.
- Keeps line breaks you already have, and at most one blank line.
What it never touches
Strings, template literals (including ${ } parts), regular expressions and comments are copied exactly. Removing all whitespace from the input and the output leaves identical text, so no token is added, removed or changed. JSDoc comments only get their * lines re-aligned.
Example
for(let i=0;i<3;i++){if(i%2){a()}else{b()}}
becomes
for (let i = 0; i < 3; i++) {
if (i % 2) {
a()
} else {
b()
}
}
Tips
If the code uses no semicolons, the line breaks you already have are what separate the statements, so they are kept. To shrink code again, use the JS minifier.
Frequently asked questions
Is this the same as Prettier?
No. It does not wrap long lines, change quotes, add or remove semicolons, or sort imports. It breaks lines after `;` and `{`, indents by brackets, and normalises spaces around tokens. Use Prettier in a project when you need a style guide enforced.
Can formatting break my code?
Only whitespace changes, and a new line break is added only where it cannot change how automatic semicolon insertion reads the code. Strings, template literals, regex literals and comments are never altered.
Why does an object literal get one property per line?
An object literal that follows an operator, a comma or a parenthesis is opened over several lines, like most beautifiers do. Braces in import, export and destructuring lists, such as const { a, b } = o, stay on one line.
Does it work with TypeScript or JSX?
No. It reads plain JavaScript. Type annotations, generics and JSX tags are not tokenised, so such code may be formatted oddly or rejected.
What if my code has a regex right after a closing parenthesis?
A slash after ) is read as division, the same rule the JS minifier uses. A regex literal there, as in if (x) /re/.test(y), can be misread; put it in parentheses or on its own statement.