A JavaScript formatter for minified and messy code
This JavaScript formatter re-indents code that arrives crammed onto one line, copied from a browser's network tab, or written with no consistent style. It is built on js-beautify, a whitespace-oriented beautifier: it inserts line breaks after statements and braces, indents each block and adds spaces around operators, without rewriting your code into a different style.
That makes it a good first step when you need to read a bundle, a third-party widget or a snippet from a production page. The same page also has a Minify button, so you can go back to compact output when you are done.
Example: unminify a JavaScript object
Input copied from a minified file:
var cart={items:[],add:function(p,q){q=q||1;this.items.push({p:p,q:q});return this},total:function(){var t=0;for(var i=0;i<this.items.length;i++){t+=this.items[i].p.price*this.items[i].q}return t}};After Beautify with the default 4-space indent and the Collapse brace style:
var cart = {
items: [],
add: function(p, q) {
q = q || 1;
this.items.push({
p: p,
q: q
});
return this
},
total: function() {
var t = 0;
for (var i = 0; i < this.items.length; i++) {
t += this.items[i].p.price * this.items[i].q
}
return t
}
};Notice what did not change: missing semicolons after return this are not added and variable names stay short. js-beautify only changes whitespace, so the result behaves exactly like the input.
Options explained
Indent
Choose 2, 3, 4 or 8 spaces, or a tab. Four spaces is the js-beautify default; many modern style guides (Airbnb, Google, StandardJS) use two.
Brace style
| Setting | Result |
|---|---|
| Collapse | Opening brace stays on the same line: if (a) {. The most common JavaScript style. |
| Expand | Every opening brace goes on its own line (Allman style), and else starts a new line. |
| End expand | Opening braces stay on the line, but else, catch and finally move below the closing brace. |
| None | Keeps braces where the input put them and only fixes indentation inside the blocks. |
For example, with End expand an if/else is printed as:
if (!name) {
return "Hi"
}
else {
return "Hello " + name
}Keep blank lines
When checked, blank lines you placed between statements are kept, but runs of several empty lines are reduced to one. Uncheck it to remove every blank line, which is handy when you want to compare two versions of a file line by line.
Beautifier vs. Prettier-style formatter
js-beautify is tolerant: it will lay out code even when it contains a syntax error, because it works on tokens instead of a full syntax tree. That is useful for fragments, but it also means a broken file is not reported. If you want an opinionated formatter that parses the code, normalizes quotes, adds semicolons and wraps long lines at a fixed width, use JavaScript Pretty Print (Prettier). To check syntax first, run the code through the JavaScript Validator.
Common problems
- Packed or obfuscated code stays unreadable. Formatting restores layout, not names. Code passed through a minifier with name mangling keeps its one-letter variables, and string tables from an obfuscator stay encoded.
- JSON looks odd. JavaScript rules keep short arrays on one line. For strict JSON output use a dedicated JSON formatter.
- Huge bundles are slow. Multi-megabyte files format in your browser, so turn off Auto update and press Beautify once.
All formatting runs locally in your browser; the code you paste is not sent to a server. When you are ready to ship, the JavaScript Minifier gives more control over mangling and compression than the quick Minify button.