About the JS Beautifier
Minified JavaScript squeezes a whole program onto one line. That is ideal for browsers and useless when you need to understand a script, track down a bug in a third-party library or review code someone pasted into a ticket. The JavaScript Beautifier puts it back into readable form, with one statement per line and proper indentation.
You choose the indent (2 spaces, 4 spaces or tabs) and the brace style: braces on the same line, braces on their own line, or just else on its own line. You can also keep the blank lines you already have, add spaces inside parentheses, and put each call of a long method chain such as fetch().then().then() on its own line.
The beautifier handles modern JavaScript, JSON, and TypeScript type annotations, and it leaves JSX elements intact. It runs in your browser, so the code you paste never leaves your device.
How to use it
- Add your codePaste minified or messy JavaScript or JSON, drop a .js, .mjs, .cjs or .json file onto the box, or use Open file. Sample loads a minified cart script.
- Pick an indentChoose 2 spaces, 4 spaces or tabs.
- Choose a brace styleBraces on the same line is the most common style. Braces on their own line puts every { on a new line. "else on its own line" keeps opening braces up but moves else, catch and finally down.
- Fine-tune the layoutKeep blank lines preserves up to one empty line between statements. Spaces inside parentheses turns if(a) into if ( a ). Break chained methods puts each .then() or .map() on its own line.
- Copy or downloadThe status line shows the number of lines. Copy the result or download it as script.js.
Key features
Readable structure
One statement per line, nested blocks indented, and spaces around operators and after commas.
Three brace styles
Same line, own line, or else on its own line, to match the style guide of your project.
Method chains
Long promise and array chains can be broken into one call per line, which makes them much easier to follow.
JSON too
Paste JSON and it is indented like an object literal, with short arrays kept on one line.
JSX left intact
JSX elements in React code are passed through as written instead of being torn apart.
Private by design
Formatting happens in your browser. Nothing is uploaded.
Examples
Formatting the sample
The Sample button loads 313 characters of minified JavaScript:
function total(e,t){let n=0;for(const o of e){if(o.qty>0){n+=o.price*o.qty}else{console.warn("skip",o.sku)}}return Math.round(n*(1+t)*100)/100}const fmt=e=>new Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(e);fetch("/api/cart").then(e=>e.json()).then(e=>console.log(fmt(total(e.items,.2))));With the defaults, the status line reads Formatted ยท 16 lines:
function total(e, t) {
let n = 0;
for (const o of e) {
if (o.qty > 0) {
n += o.price * o.qty
} else {
console.warn("skip", o.sku)
}
}
return Math.round(n * (1 + t) * 100) / 100
}
const fmt = e => new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(e);
fetch("/api/cart").then(e => e.json()).then(e => console.log(fmt(total(e.items, .2))));The short names e, t and n stay short. A beautifier restores layout, not the original names.
Brace styles compared
| Brace style | Lines | The if/else becomes |
|---|---|---|
| Same line | 16 | } else { |
| else on its own line | 17 | } then else { |
| Own line | 22 | }, else, { |
Breaking a method chain
With "Break chained methods" on, the last line of the sample becomes three lines, and the sample grows to 19 lines in total:
fetch("/api/cart")
.then(e => e.json())
.then(e => console.log(fmt(total(e.items, .2))));Spaces inside parentheses
if(a&&b){go(1,2)} becomes if (a && b) { by default. With "Spaces inside parentheses" on, you get if ( a && b ) { and go( 1, 2 ), a style some projects such as WordPress use.
JSON
{"name":"Ada","langs":["en","fr"],"active":true} becomes 5 lines:
{
"name": "Ada",
"langs": ["en", "fr"],
"active": true
}Tips
- Use it to read a library or a script from a live site. Copy the minified file from your browser's developer tools and paste it here.
- Turn on "Break chained methods" for code with long promise chains or array pipelines like .filter().map().reduce(). Each step gets its own line.
- Match the brace style and indent to your project's style guide before pasting the result into your code, so the next diff only shows real changes.
- For strict JSON with key sorting and exact error locations, use the JSON Formatter instead. It also checks that the JSON is valid.
- When you are done, run the code through the JavaScript Minifier again for production.
Common mistakes and limits
- Expecting the original names backMinifiers rename variables to single letters, and that information is lost. The beautifier restores the layout only.
- Expecting syntax errors to be foundThe beautifier formats whatever you paste. A missing bracket gives oddly indented output, not an error message. If the result looks wrong, look for the bracket.
- Expecting JSX to be formattedJSX elements are kept exactly as written, so they are not broken, but they are not re-indented either. A dedicated formatter like Prettier handles JSX layout.
- Expecting semicolons to be addedStatements keep or lack semicolons exactly as in your code. Minified code often leaves out the last semicolon in a block, and it stays that way.
- Using it to deobfuscate codeObfuscated code that hides strings in arrays or encodes logic stays hard to read after formatting. Beautifying only adds whitespace.