JS Beautifier
Production JavaScript is minified into a single line with short names, which is exactly what you want for delivery and exactly what you do not want when reading it. Reformatting restores the line breaks and indentation, with a basic awareness of quoted strings and template literals that keeps most punctuation inside them from being touched. It is a simple formatter rather than a full JavaScript parser, though, and a specific escape-sequence edge case can confuse it (see Things worth knowing).
It will not undo a minifier's renaming (that information is gone), but structure alone makes a bundle far easier to follow.
Runs in your browser. JS Beautifier processes your input on your own device. Nothing you enter or upload is sent to a server.
Did this tool help you? ☕
WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.
(opens in a new tab)How to use the JS Beautifier
- Paste your JavaScript into the input area.
- Pick an indentation of 2 spaces, 4 spaces or a tab.
- Select Beautify JavaScript.
- Copy the readable output.
Beautify's string tracking is basic, not parser-level
Beautify decides whether a quote character closes the current string by checking only the one character immediately before it: if that character is a backslash, it assumes the quote is escaped and leaves the string open. Real JavaScript instead depends on whether an even or odd number of backslashes lead up to the quote, because two backslashes in a row is itself an escaped backslash, not an escaped quote.
That difference matters for a string that ends in an escaped backslash, such as a Windows-style path. The example below is valid, ordinary JavaScript: a string holding one literal backslash, followed by more code that plainly needs reformatting. Beautify misreads the closing quote as still being inside the string, after which it never finds another boundary to re-sync on, so nothing in the rest of the file gets reformatted at all.
A string ending in an escaped backslash, followed by more code
Input
const p="C:\\";function f(a,b){return a+b;}const r={x:1,y:2};Output
const p="C:\\";function f(a,b){return a+b;}const r={x:1,y:2};The Minify option is a basic text pass, not a JavaScript minifier
Minify runs a short sequence of find-and-replace steps: strip // comments, strip /* */ comments, collapse whitespace, tighten spacing around punctuation. None of those steps parses the code, so none of them knows the difference between an actual comment and a // that happens to appear inside a string, a template literal or a regular expression.
The clearest case is a URL stored as a string. "http://example.com" contains "//", which the comment-stripping step treats as the start of a line comment. Everything from that point to the end of the line is deleted, including any code that followed it on the same line, as the example below shows.
A URL inside a string, minified
Input
const url = "http://example.com"; console.log(url);
Output
const url = "http:console.log(url);
Things worth knowing
- Beautify decides a string has closed by checking only the single character before the closing quote, not whether an even or odd run of backslashes leads up to it. A string ending in an escaped backslash can fool it into never closing the string, after which the rest of the file is left unformatted. See the worked example above.
- The Minify option deletes everything after "//" to the end of a line with no awareness of strings, template literals or regular expressions, so a URL or comment-like text inside quotes can corrupt the surrounding code. Do not run production code through it.
- Minify also collapses whitespace inside strings and template literals the same way it collapses whitespace in code, so a deliberately multi-line template literal or a string with repeated spaces can come out changed.
- For real minification, use your build tool's minifier (Terser, esbuild and most bundlers all include one) rather than this basic option.
Frequently asked questions
Can it recover the original variable names?
No. Minifiers replace descriptive names with short ones and the originals are not stored in the output. Only a source map can restore them, and that has to be published alongside the bundle. Beautifying only restores whitespace and structure, never the names or comments a minifier removed.
Does formatting change what the code does?
Beautify changes whitespace, which JavaScript is generally insensitive to. It has a basic awareness of quoted strings and template literals that keeps most of that content from being touched, but it is not a JavaScript parser: it decides whether a quote closes a string by looking only at the single character before it, not at whether that character is itself part of an escaped backslash. A string that ends in an escaped backslash can fool it into thinking the string never closes, after which nothing later in the file gets reformatted (see Things worth knowing for a worked example). The other thing to watch is automatic semicolon insertion in code that omits semicolons. Test any reformatted code before relying on it.
Is my code uploaded?
No. It is processed in your browser.
Should I use the Minify option on real code?
No, not for anything you intend to ship. It is a simple text pass, not a JavaScript parser, and it has no concept of strings or regular expressions: it strips // through to the end of a line and /* */ comments anywhere they appear, including inside a quoted URL such as "http://example.com", which corrupts the string and can delete the rest of that line of code. See the worked example above. For a real build, use your bundler's minifier or a dedicated tool such as Terser or esbuild.