How the JavaScript beautifier works
Click Beautify and the code in the left editor is passed to js_beautify from the open-source js-beautify library (version 1.14.11), which runs in your browser. It reads the code token by token and rebuilds the layout: one statement per line, blocks indented by 2 spaces, spaces around operators, and a newline at the end of the file. Blank lines you already had are kept, up to two in a row.
The most common reason to use it is reading code you did not write in that shape: a minified library, a bundle served by a site you are debugging, or a snippet pasted from a chat message with its line breaks lost.
Example: reading a minified script
This is the kind of single line you find in a production bundle:
!function(){"use strict";const e=document.querySelectorAll("[data-tab]");e.forEach(t=>{t.addEventListener("click",()=>{e.forEach(n=>n.classList.remove("active")),t.classList.add("active")})})}();
After Beautify:
! function() {
"use strict";
const e = document.querySelectorAll("[data-tab]");
e.forEach(t => {
t.addEventListener("click", () => {
e.forEach(n => n.classList.remove("active")), t.classList.add("active")
})
})
}();
Now the structure is clear: an immediately invoked function that adds a click handler to every [data-tab] element, clears active from all of them, and sets it on the clicked one. The names e, t, and n stay as they are. The comma between the two calls is the minifier's way of joining two statements into one expression, and the beautifier leaves it alone.
Beautifying can reveal real bugs
Because the output follows the way JavaScript actually parses your code, it sometimes shows a bug that the original line breaks were hiding. Automatic semicolon insertion (ASI) is the classic case:
var total = 1
(function () { console.log("init") })()
becomes
var total = 1(function() {
console.log("init")
})()
JavaScript does not insert a semicolon before a line that starts with (, so the source really does try to call 1 as a function and throws a TypeError. The beautifier did not break anything: it showed you the existing problem. The fix is a semicolon at the end of the first line. Lines that start with [ or a template literal have the same trap.
Other things worth checking in beautified output: an extra level of indentation that never returns to the left edge usually means a missing closing brace, and return on its own line followed by an object on the next line returns undefined, not the object.
What it handles, and what it does not
- Modern syntax is fine. Arrow functions,
async/await, template literals, optional chaining (?.), ??, classes, and private fields like #count are formatted correctly.
- No validation. Code with a missing brace or a stray character is formatted anyway, without an error message.
- No renaming or unpacking. Minified names stay short, and code packed with
eval(function(p,a,c,k,e,d)...) is only reformatted, not unpacked.
- No JSX. A JSX tag is treated as comparison operators and comes out broken, for example
< div className = "x" >.
- Fixed style. Indentation is always 2 spaces and braces stay on the same line. There are no options on this page.
When to use a different tool
- To compress code for production, or to check it for syntax errors, use the JavaScript Minifier.
- To edit and run a script with syntax highlighting, open the JavaScript Editor.
- For a JSON payload rather than code, use the JSON Formatter, which also validates it.
- To format the stylesheet that goes with the script, use the CSS Beautifier.
Frequently asked questions
Can the beautifier recover the original variable names from minified code?
No. A minifier replaces local names like callback or timerId with single letters, and that information is not stored in the minified file. The beautifier restores indentation and line breaks only. If the site publishes a source map, your browser developer tools can use it to show the original names.
Does beautifying change what my JavaScript does?
It is designed to change only whitespace and line breaks. It does not add or remove semicolons, rename anything, or reorder code, so the program should behave the same. Re-run your tests after any bulk reformat to be sure.
Does it check my JavaScript for syntax errors?
No. Incomplete or invalid code is formatted without a warning. For a quick syntax check, paste the code into the JavaScript Minifier: it uses the Terser parser and reports the first unexpected token it finds.
Can I format JSX or TypeScript here?
This page is built for plain JavaScript. JSX is not understood: a tag like <div className="x"> is split into comparison operators and the result no longer compiles. Use a formatter with JSX or TypeScript support, such as Prettier, for those files.
Is my code uploaded to a server?
No. Formatting runs in your browser with the js-beautify library. The input editor keeps a copy in your browser local storage so it survives a reload, and Clear removes it.