To beautify JavaScript, paste your code into the input editor or drop a .js file on the Open a file box, then select Beautify. The tool first checks the syntax, then reformats the code with your chosen indentation and shows it with syntax highlighting. Copy the output or select Download to save a .js file.
How to use the JavaScript beautifier
- Add your code. Paste it into the editor, or select Choose file to open a .js, .mjs, .cjs or .json file. Dragging a file onto the Open a file box works too.
- Check the settings. Parser Mode is on Auto detect, which treats input as JSON when it starts with { or [ and parses as strict JSON. Pick 2 spaces, 4 spaces or Tab under Indentation.
- Beautify. Select Beautify or press Ctrl+Enter. If the code has a syntax error, formatting stops and the error and its line number appear under Validation & Parser Notes.
- Save it. Select Copy Output or Download. The file keeps its original name with a .js or .json extension.
What does a JavaScript beautifier do?
A JavaScript beautifier, or JS formatter, rewrites code with consistent indentation, spaces around operators and one statement per line. It doesn't rename anything or change what the code does. This tool runs the open-source js-beautify library for JavaScript and the browser's own JSON parser for JSON.
Input:
const items=[{name:"Pen",price:2,qty:3},{name:"Pad",price:5,qty:1}];
function total(list){
let sum=0;
for(const item of list){sum+=item.price*item.qty}
return sum}Output with the default 2-space indent:
const items = [{
name: "Pen",
price: 2,
qty: 3
}, {
name: "Pad",
price: 5,
qty: 1
}];
function total(list) {
let sum = 0;
for (const item of list) {
sum += item.price * item.qty
}
return sum
}The beautifier uses js-beautify's collapse brace style: an opening brace stays on the line of its statement, and every block and object is expanded onto its own lines, including ones you wrote on a single line.
How to unminify JavaScript
Paste the minified file and select Beautify. Spacing around operators and commas comes back, separate statements go on separate lines, and every function body and block is expanded and indented.
No beautifier can restore what a minifier threw away. Local variable names shortened to e, t or n stay short, and comments are gone. If the site publishes source maps, your browser's developer tools can show the original source files, which is the only way to get the real names back.
JavaScript formatter options explained
| Option | Choices | Notes |
|---|---|---|
| Parser Mode | Auto detect, JavaScript, JSON | JSON mode uses strict JSON rules: double quotes, no comments, no trailing commas |
| Indentation | 2 spaces, 4 spaces, Tab | Applies to both JavaScript and JSON |
| Quotes | Preserve original, Prefer single, Prefer double | Skips strings that contain the other quote; ignored for JSON |
| Trailing Commas | Preserve, Remove, Add to multi-line lists | Only touches object and array literals and patterns found by the parser |
| Semicolons | Preserve, Add missing | Adds a semicolon exactly where JavaScript's automatic semicolon insertion would |
Quotes, Trailing commas and Semicolons work on the Acorn parse of your code, not on raw text, so strings, comments, regular expressions and template literals are left alone. After every beautify or minify, the result is parsed again and its syntax tree is compared with your input's; if they differ, no output is shown. For team-wide style rules, a formatter in your editor or build pipeline is still the place to enforce them.
Validate JavaScript and JSON syntax
Validate parses your code with Acorn, a standards-compliant JavaScript parser, set to the latest ECMAScript version. It tries module syntax first, so import and export work, then falls back to classic script syntax. Errors are listed with their line number.
TypeScript and JSX aren't standard JavaScript, so Acorn rejects type annotations and <Component /> tags, and the beautifier won't format them. In JSON mode the browser's JSON parser does the check, and reformatting only changes whitespace, so large numbers such as IDs above 9007199254740991 and escape sequences are kept exactly as written. For deeper JSON work, such as a tree view, use the JSON formatter.
Minify adds any missing semicolons, then rebuilds the code from parser tokens with only the spaces it needs, dropping comments except /*! ... */ license notes. It doesn't rename variables, so a dedicated minifier such as Terser will still produce smaller files for production. To see exactly what changed between two versions of a script, compare them in the diff checker.
Frequently asked questions
Is this JavaScript beautifier online and free?
Yes. It runs in your browser with no sign-up, and your code is never uploaded. Files you open are read locally.
Why won't my code format?
The tool checks syntax first and stops if the code doesn't parse. Look at the line number in the error list. TypeScript, JSX and code with a missing bracket are the usual causes.
Can a JS beautifier recover original variable names?
No. Minifiers rename local variables to short names and the originals aren't stored in the file. Only a source map, if the site provides one, can map the code back to the original names.
Does it format JSON?
Yes. With Parser Mode on Auto detect, valid JSON that starts with { or [ is formatted with your chosen indent. Set Parser Mode to JSON to force strict JSON checking.
Does beautifying change what my JavaScript does?
No. With Quotes, Trailing commas and Semicolons left on Preserve, only whitespace and line breaks change, and with any setting the output is only shown if it parses to the same syntax tree as your input.
What keyboard shortcuts does it support?
In the input editor, Ctrl+Enter beautifies (Cmd+Enter on a Mac). Tab inserts two spaces; press Escape first if you want Tab to move to the next control.