Formatters
JSBeautifier — JavaScript Beautifier
The classic js-beautify engine — the fastest way to make minified JavaScript readable again.
In short
JSBeautifier online: the classic js-beautify engine that unpacks minified JavaScript into readable, indented code. Fast, forgiving, in your browser.
By NaveenKumar T · Updated
Learn: Pretty Print JSON in JavaScript: stringify and Beyond
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
JSBeautifier: input and output
A minified analytics snippet exactly as it appears in a production bundle: one line, single-letter parameters, comma-chained statements and `!0` in place of `true`.
!function(w,d){var q=w.dataLayer=w.dataLayer||[];function track(e,p){q.push({event:e,ts:Date.now(),props:p||{}})}var t;d.addEventListener("scroll",function(){clearTimeout(t),t=setTimeout(function(){track("scroll",{y:w.scrollY})},150)},{passive:!0}),w.track=track,void 0===w.__t&&(w.__t=1)}(window,document);! function(w, d) {
var q = w.dataLayer = w.dataLayer || [];
function track(e, p) {
q.push({
event: e,
ts: Date.now(),
props: p || {}
})
}
var t;
d.addEventListener("scroll", function() {
clearTimeout(t), t = setTimeout(function() {
track("scroll", {
y: w.scrollY
})
}, 150)
}, {
passive: !0
}), w.track = track, void 0 === w.__t && (w.__t = 1)
}(window, document);Only whitespace changed: `!0`, `void 0` and the comma-chained statements are exactly as the minifier left them, and js-beautify keeps the leading `!` of the IIFE (adding a space after it) rather than restructuring it.
Learn more
js-beautify vs prettier: three concrete differences
This page runs js-beautify, not prettier, and the two engines disagree in ways that matter once you stop formatting tidy source. The first difference is tolerance. prettier builds a full syntax tree and refuses anything it cannot parse, so a trimmed fragment, a half-copied region of a bundle, or a dialect it does not recognize produces an error instead of output. js-beautify walks the token stream and re-indents whatever it is handed: a function body with no closing brace, a snippet that starts mid-expression, a template with server-side tags interleaved. Mid-debugging that is the difference between reading the code and not reading it.
The second difference is that js-beautify does not reprint expressions. prettier discards your line breaks and re-derives every one of them from the tree at an 80-column budget — a long call chain is exploded one call per line whether or not you wanted that, and a short one is joined back up. js-beautify only adds and removes whitespace around the tokens that are already there. Statements are split at semicolons and braces, but an expression that arrived on one line stays on one line. When you are comparing a beautified bundle against a source map or against the original file, that one-to-one relationship between input and output tokens is worth more than canonical style.
The third difference is that brace placement is yours to choose. prettier has exactly one brace style and no option to change it; js-beautify offers three, exposed in the rail on this page as Collapse, Expand and End-expand. Nothing here is a matter of taste being enforced on you — pick the layout your codebase or your reading habit prefers and re-run.
| JSBeautifier (js-beautify) | JavaScript Formatter (prettier) | |
|---|---|---|
| Parsing | Token stream — tolerates broken and partial code | Full syntax tree — errors out on anything invalid |
| Line breaks | Only added around statements and braces | All line breaks re-derived at an 80-column width |
| Expressions | Left as written | Reprinted — chains split, short ones rejoined |
| Quotes, semicolons, commas | Untouched | Normalized to prettier's defaults |
| Brace style | collapse / expand / end-expand | One fixed style, not configurable |
| Best for | Reading bundles, fragments, minified code | Code you are about to commit |
Reading a production bundle, start to finish
The canonical job: a stack trace points at `vendor.4f2a.js:1:184203`, you open the file and find one line 600 kB long. Copy the region around the offending column, paste it here, press Beautify, and you have functions, braces and one statement per line to reason about — enough to see which library the frame belongs to and what it was doing. Selecting a region rather than the whole file is deliberate; js-beautify is happy with a fragment, and a few hundred lines are far easier to read than the whole bundle.
What survives the pass is exactly the minifier's semantic work: `!0` and `!1` stay rather than becoming `true` and `false`, `void 0` stays, comma-chained statements keep their commas, and `a && b()` is never rewritten into an `if`. That is the correct behaviour for a beautifier — every one of those rewrites would change the tokens you are trying to match against a source map. Turning mangled names back into readable identifiers is a separate job for a deobfuscator, and no formatter of either kind will do it.
The same tolerance makes this the better page for code that was never valid on its own: a handler extracted from an `onclick` attribute, a snippet from a blog post that stops mid-function, JavaScript embedded in a templating language whose tags a parser chokes on. When you are finished reading and about to commit, run the result through the JavaScript Formatter so the style matches your repository.
Help
Frequently asked questions
Everything you need to know about the JSBeautifier.
01How do I format JavaScript code here?
Paste minified or partial JavaScript (or load a file/URL), pick a brace style (Collapse, Expand or End-expand) and press Beautify. js-beautify re-indents the token stream without needing a full valid parse, so a truncated fragment or a template-embedded snippet still comes back readable.
02Why does JSBeautifier accept code that the JavaScript Formatter rejects?
Different philosophies: prettier parses fully (and stops on errors); js-beautify works token-by-token, so it beautifies partial, trimmed, or slightly broken code too. That tolerance is exactly what you want mid-debugging — and why both tools exist here.
03Will js-beautify rewrite minifier idioms like `!0`, `void 0` or the `!function(){}()` wrapper?
No. js-beautify changes whitespace and line breaks only, so the idioms minifiers leave behind survive untouched: `!0` and `!1` stay rather than becoming `true` and `false`, `void 0` stays, comma-chained statements keep their commas, and `a && b()` is never rewritten as an `if`. What you get is one statement per line, indented braces, and spaces around operators and after keywords — enough to read a bundle. Turning idioms back into readable source needs a deobfuscator, not a beautifier.
04What do the Collapse, Expand and End-expand brace styles do?
They control where js-beautify puts the braces of a block. Collapse (the default, and what prettier and most JavaScript style guides use) keeps the opening brace on the same line as its statement — `function f() {` — and puts `else` on the same line as the preceding `}`. Expand is the Allman style: the opening brace moves onto a line of its own, aligned with the statement, and `else` starts a fresh line too, which suits people coming from C# or from a C codebase. End-expand is the hybrid — opening braces stay collapsed, but `else`, `catch` and `finally` are pushed onto their own line after the closing brace. Only whitespace changes in every case; switching styles and re-running is free, and no rule about quotes, semicolons or line width comes along with the choice.
Keep working
Related tools
JavaScript Formatter
Formatters
TypeScript Formatter
Formatters
Java Formatter
Formatters
C# Formatter
Formatters
Babel Formatter
Formatters
CSS Formatter
One stylesheet workspace, three engines: prettier for canonical formatting, js-beautify for unminifying broken bundles, and a minifier for the compact form — pick the mode in the rail.