JavaScript Beautifier / Formatter

Minified bundles and code pasted from chat or e-mail are hard to read. This beautifier re-indents JavaScript by its braces, brackets and parentheses, puts one statement on each line and adds spaces around operators, so you can follow the logic, review it or debug it. It works on tokens rather than a full parser: strings, regular expressions and template literals are copied character for character, and comments are kept.

How to use this tool

1. Paste the JavaScript into the box; the formatted version appears as you type.
2. Choose 2 spaces, 4 spaces or tabs for indentation.
3. Pick a brace style: on the same line as if/for/function, or on a line of its own.
4. Decide how many blank lines in a row to keep, then copy the result.

Formula

indent = number of open { [ ( that started a multi-line block × your indent unit

A { opens a block or an object literal and starts a new indented line; } closes it. ; ends a line, except inside a for (…) header. Commas break lines inside object literals and inside brackets you had already split over several lines. Where your code relies on automatic semicolon insertion — a line break after return, or a statement starting with ( or [ — the line break is kept, so the formatted code behaves exactly like the original.

Example

The minified line if(a){b()}else{c()} becomes five lines: if (a) {, then b() indented by two spaces, then } else {, c() indented again, and a closing }. With the own-line brace style the opening braces move to lines of their own and else starts a new line.