How to use the javascript beautifier
- Paste your JavaScript, minified or not, into the box. The sample is already loaded so you can see the result.
- Pick the indentation: 2, 4 or 8 spaces, or tabs.
- Choose the brace style: opening brace on the same line (most common) or on its own line.
- Copy the formatted code. If the tool reports a syntax problem such as an unterminated string, fix that spot and try again.
What a JavaScript beautifier does
A javascript beautifier changes only whitespace. It puts statements on separate lines, indents the contents of every block, and adds consistent spaces around operators and after commas. The program that comes out behaves exactly like the one that went in; only the layout is different. People reach for a code beautifier javascript tool mostly to read minified bundles, to clean up pasted snippets, or to settle a style argument before a code review.
Nothing is renamed, reordered or rewritten. If you need the opposite, shrinking readable code, use the JS minifier.
How this js code beautifier reads your code
It does not rely on line-by-line pattern matching. The code is split into tokens: words, numbers, strings, template literals, regular expressions, comments and punctuation. Layout decisions are then made from the token before and after each position.
The hard part is the slash. In a / b / c it divides, but in x = /b/g it opens a regular expression. The beautifier decides by looking at what came before: after a value (a name, number or closing bracket) it is division, after an operator, an opening bracket or a keyword such as return it starts a regex. After the ) of an if, for or while header it also starts a regex, so if (ok) /x/.test(s) is read correctly.
Formatting rules applied
| Situation | Result |
|---|---|
Statement ending in ; | New line, except inside for (;;) headers |
Block { } | Contents indented one level, closing brace on its own line |
| Empty block | Written as {} |
| Object literal | One property per line when long, multi-line in the source or holding a function; short ones stay on one line |
switch | case labels indented, bodies one level deeper |
} else, } catch, } finally | Kept on the closing brace line |
Line breaks inside ( ) and [ ] | Kept, with the continuation indented |
| Blank lines | A run of blank lines becomes one |
Method chains split across lines in the source keep their line breaks and gain one indent level.
What stays exactly as written
Strings, regular expressions and template literals are copied character for character, including everything inside ${ } placeholders. Comments are kept; trailing comments stay at the end of their line, and a /** ... */ block is re-indented to match its position.
The tool also never adds or removes semicolons and never deletes a line break that could matter. JavaScript has automatic semicolon insertion, so return followed by a new line returns nothing, and a line starting with ++ or ( may continue the previous statement. Keeping the original breaks there is what makes the output safe to run.
Beautifier versus formatter and linter
People search for a javascript code formatter and a beautifier javascript tool interchangeably, but there is a difference. A beautifier like this one repairs layout of whatever you paste. Opinionated formatters such as Prettier also normalise quotes, add semicolons and wrap lines at a fixed width, and they usually run in your editor or build.
A linter checks for mistakes rather than layout. Use the beautifier when you need quick readable output, and the others for enforcing a project style. For other languages try the CSS formatter, the JSON formatter or the HTML prettifier.
Limits to know about
Plain JavaScript (ES2022 and later syntax) is supported. JSX and TypeScript type syntax are not, and code inside template placeholders is left as typed. Convert TypeScript first with the TypeScript to JavaScript converter. If the input has an unterminated string, comment or regular expression, the tool reports it rather than guessing.
Very deep nesting is capped at 40 indent levels so that extreme input still finishes quickly. Files of a few hundred kilobytes format in well under a second in a modern browser.
Worked examples
| Example | Input | Result |
|---|---|---|
| Minified function | JavaScript: function f(x){if(x>1){return x*f(x-1)}return 1}; Indentation: 2; Brace style: collapse | function f(x) { / if (x > 1) { / return x * f(x - 1) / } / return 1 / } / |
| Regex versus division | JavaScript: var r=/ab+c/gi,q=a/2/3;if(/x/.test(s))go(); Indentation: 2; Brace style: collapse | var r = /ab+c/gi, q = a / 2 / 3; / if (/x/.test(s)) go() / |
| Object and arrow functions | JavaScript: const o={a:1,list:[1,2,3],run:()=>fetch(u).then(r=>r.json())};; Indentation: 2; Brace style: collapse | const o = { / a: 1, / list: [1, 2, 3], / run: () => fetch(u).then(r => r.json()) / }; / |
| Tabs and Allman braces | JavaScript: if(ok){start()}else{stop()}; Indentation: tab; Brace style: expand | if (ok) / { / start() / } / else / { / stop() / } / |
FAQ
What is a JavaScript beautifier?
A beautifier javascript tool rewrites the whitespace of JavaScript so the code is easy to read: one statement per line, consistent indentation and spacing. The behaviour of the program does not change.
Can it beautify minified JavaScript?
Yes. Minified code has no line breaks, so the tool adds them after statements and inside blocks. Variable names that were shortened by the minifier cannot be restored.
Will beautifying change how my code runs?
No. Only spaces and line breaks are touched, and line breaks that matter for automatic semicolon insertion are kept. Strings, regex literals, template literals and comments are untouched.
Does it handle regex literals and division?
Yes. The tool decides from the preceding token whether a slash starts a regular expression or is a division sign, so a / b / c and /ab+c/g are both formatted correctly.
Does it support JSX or TypeScript?
No, only standard JavaScript. Convert TypeScript with the TypeScript to JavaScript converter first, and compile JSX before formatting.
Is my code uploaded?
No. Formatting runs in your browser and the code never leaves your device.
Is this a code formatter for JS?
Yes, it works as a code formatter js developers can use on pasted scripts: it re-indents, breaks lines and normalises spacing without changing what the code does. It does not format JSX or TypeScript.
Sources and references
- ECMAScript Language Specification: the grammar the formatter follows