About the JavaScript Beautifier
This JavaScript beautifier turns minified, compressed or carelessly formatted JS into clean, readable code. Paste a one-line bundle snippet, a bookmarklet, code copied from a minified library or a messy script, and get consistent indentation, one statement per line, spaces around operators and keywords, and properly nested blocks, objects and switch statements.
It is useful for reading third-party or production code while debugging, reviewing snippets from Stack Overflow or a chat, studying how a minified script works, and tidying quick scripts before committing them. Choose 2 spaces, 4 spaces or tabs. The formatter understands modern syntax — arrow functions, template literals with ${} expressions, optional chaining (?.), nullish coalescing (??), spread, classes, async/await and regular-expression literals — and keeps strings, templates, regexes and comments exactly as written.
Code written without semicolons keeps its original line breaks, so automatic semicolon insertion still works the same way, and continuation lines such as chained .then() calls get an extra indent. Short object literals that fit on one line stay inline. The beautifier only changes whitespace — it never renames, reorders or removes code — and it runs entirely in your browser. JSX and TypeScript-specific syntax are not targeted.
How to use the javascript beautifier
- 1Paste the minified or messy JavaScript into the input.
- 2Choose 2 spaces, 4 spaces or tabs.
- 3Check the status for parse errors or bracket warnings.
- 4Copy the formatted code.
Formula and method
The code is first split into tokens — identifiers and keywords, numbers, strings, template literals (including nested ${} expressions), regular-expression literals, comments and punctuators. A / is read as the start of a regex only where an expression can begin (after an operator, an opening bracket or a keyword such as return), and as division otherwise, the same rule JavaScript engines use.
The tokens are then re-printed with a stack that tracks blocks, object literals, parentheses, brackets and switch statements. Opening a block or a multi-line object increases the indent and starts a new line; semicolons and commas inside objects end the line; case labels get their own indent level; and keywords, binary operators, arrows and the ternary ? : get surrounding spaces, while unary operators, member access and calls do not. Line breaks in the source are kept where a statement could end without a semicolon, and lines that continue an expression are indented one extra level. Tokens are never changed, so the program behaves identically.
Worked examples
Unminify a one-line function
Each { opens a new indented block and each ; ends a line. Keywords get a space before their parenthesis (if (…)), the unary ! stays attached to name, and the + operator and the comma in the array get spaces. One line becomes seven.
Object, arrow function, ternary and switch
The short object literal fits on one line, so it stays inline with spaces inside the braces. The arrow and the ternary ? and : are spaced. Inside the switch, case and default labels are indented one level and their statements two levels.
Code without semicolons, with comments and a chained call (4 spaces)
The function body is re-indented with four spaces. Because the code relies on automatic semicolon insertion, existing line breaks between statements are kept; the trailing // GET comment stays on its line, the template literal is untouched, and the .catch line is a continuation, so it gets one extra indent.
Frequently asked questions
How do I unminify JavaScript?+
Paste the minified code into the input and the beautifier re-inserts line breaks and indentation. Formatting restores structure but not original variable names — if the code was mangled to a, b, c, those short names remain, because no tool can recover them without a source map.
Does beautifying change how my code runs?+
No. The beautifier only changes whitespace between tokens; strings, template literals, regular expressions, comments and identifiers are copied exactly. Line breaks in code without semicolons are preserved so automatic semicolon insertion behaves the same.
Should I use 2 or 4 spaces for JavaScript?+
Two spaces is the most common convention in modern JavaScript — it is the default in Prettier, StandardJS and the Airbnb and Google style guides. Four spaces or tabs are also fine; what matters most is consistency across a project.
What is the difference between a beautifier and Prettier or ESLint?+
A beautifier quickly reformats whitespace for reading. Prettier is an opinionated formatter that fully reprints the syntax tree (wrapping long lines, normalising quotes), and ESLint finds bugs and style problems. For a codebase, configure Prettier; for one-off reading of minified code, a beautifier is the fastest option.
Why did I get "Unterminated string literal" or "template literal"?+
The input ends inside a string, template or comment — usually because the code was only partly copied or a quote is missing. Check the end of the snippet and make sure every quote, backtick and /* has its closing partner.