Skip to content

JavaScript Beautifier

Developer ToolsProgramming Language Tools
Indent with
Beautified code —
Lines
—
Tokens
—
Comments
—
Characters
—

Paste JavaScript and the beautifier re-prints it with one statement per line, braces in K&R style and your choice of 2 spaces, 4 spaces or a tab per level. The one-liner function add(a,b){return a+b;} becomes three lines: the header, an indented return a + b; and the closing brace.

About this tool

Minified bundles, code copied from a browser console and snippets pasted from chat all arrive as one dense line that is hard to read or debug. This beautifier splits the code into tokens and lays it out again: a new line after every opening brace and statement, closing braces on their own lines, spaces around operators and after commas. Strings, template literals, regular expressions and comments are recognised as whole tokens, so a semicolon inside a string never breaks a line. The stats show line, token and comment counts for the result. It is a layout tool, not a parser: it does not check syntax, rename the short variables a minifier produced, or restore code that was removed. For a project-wide style, a formatter configured in your editor stays the better choice.

How to use it

  1. Paste or open code

    Paste JavaScript into the box, or open a .js or .txt file from your device.

  2. Pick the indent

    Choose 2 spaces, 4 spaces or a tab for each nesting level.

  3. Copy the output

    The formatted code updates as you type; copy it back into your editor.

Examples

A minified function

JavaScript code
function add(a,b){return a+b;}
Indent with
2 spaces

Result Beautified code: function add(a, b) {
return a + b;
}
Lines: 3
Tokens: 14
Comments: 0
Characters: 38

  1. Split the source into 14 tokens: words, numbers, strings, template literals, regular expressions, comments and operators.
  2. Opened a new line after each { and statement-ending ;, closed each } on its own line, and indented every level with 2 spaces.
  3. Put single spaces around binary operators and after commas; strings, regexes and comments are copied unchanged.

The body moves onto its own indented line, a space follows the comma, and the + operator gets a space on each side.

if / else without semicolons

JavaScript code
if(x>1){y=2}else{y=3}
Indent with
2 spaces

Result Beautified code: if (x > 1) {
y = 2
} else {
y = 3
}
Lines: 5
Tokens: 17
Comments: 0
Characters: 39

  1. Split the source into 17 tokens: words, numbers, strings, template literals, regular expressions, comments and operators.
  2. Opened a new line after each { and statement-ending ;, closed each } on its own line, and indented every level with 2 spaces.
  3. Put single spaces around binary operators and after commas; strings, regexes and comments are copied unchanged.

else stays on the same line as the closing brace, K&R style, and a space separates if from its condition.

A for loop, 4-space indent

JavaScript code
for(var i=0;i<3;i++){a[i]=-i;}
Indent with
4 spaces

Result Beautified code: for (var i = 0; i < 3; i++) {
a[i] = -i;
}
Lines: 3
Tokens: 24
Comments: 0
Characters: 46

  1. Split the source into 24 tokens: words, numbers, strings, template literals, regular expressions, comments and operators.
  2. Opened a new line after each { and statement-ending ;, closed each } on its own line, and indented every level with 4 spaces.
  3. Put single spaces around binary operators and after commas; strings, regexes and comments are copied unchanged.

Semicolons inside the for header stay on one line, i++ and the unary minus keep no space, and the body is indented four spaces.

How it is calculated

output = tokens re-joined, line break after { and ;, indent = depth × unit

tokens
words, numbers, strings, template literals, regex literals, comments and operators read from the source
depth
number of currently open { braces
unit
the chosen indent: 2 spaces, 4 spaces or one tab

The source is read left to right into tokens; longest operators match first, so === is one token, not three. A slash counts as a regex start when it follows an operator or keywords such as return. The printer then opens a new indented line after each {, ends a line after each ; outside parentheses, and puts } on its own line, keeping else, catch and finally beside it. Where the source relied on a line break instead of a semicolon, that break is kept.

When not to use it

  • To enforce a team style across a repository, use a formatter wired into your editor or CI.
  • For checking whether code is valid, use a linter; this tool lays out code without parsing it.
  • For JSON data, a JSON formatter also validates the structure.

Common mistakes

  • Expecting readable names back from minified code; short names like a and b stay as they are.
  • Pasting TypeScript or JSX and expecting type annotations or tags to be laid out like plain JavaScript.
  • Trusting the layout when the brace warning appears; a missing } shifts every following line.

Frequently asked questions

Does beautifying change what my code does?

It only changes whitespace and line breaks. Tokens are kept in order and strings, regex literals and comments are copied character for character. Line breaks your code relied on in place of semicolons are kept too.

Can it undo minification completely?

No. A minifier renames variables to single letters and strips comments, and that information is gone. The beautifier restores the layout, which makes the structure readable, but the names stay short.

Which brace style does it use?

K&R, also called one true brace style: the opening brace ends the line of the if, function or loop, and else, catch and finally sit on the same line as the preceding closing brace. This matches the Google and Airbnb JavaScript style guides.

How are regular expressions told apart from division?

A slash starts a regex when the previous token is an operator, an opening bracket, a comma or a keyword such as return or typeof. After a name, number or closing bracket it is read as division.

Is my code sent to a server?

No. Tokenising and formatting run in your browser, and the code is not stored after you leave the page.

What does the warning about braces mean?

It appears when an opening and closing bracket, brace or parenthesis do not pair up. The output is still produced, but the indentation after the mismatch is likely off, which helps point to where a brace went missing.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 25). JavaScript Beautifier. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/developer-tools/programming-language-tools/javascript-beautifier/

MLA

Tools Directory Editorial Team. “JavaScript Beautifier.” Tools Directory, 25 Oct. 2026, https://tools.milunir.com/developer-tools/programming-language-tools/javascript-beautifier/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “JavaScript Beautifier.” Tools Directory. Last modified October 25, 2026. Accessed October 26, 2026. https://tools.milunir.com/developer-tools/programming-language-tools/javascript-beautifier/.

Link<a href="https://tools.milunir.com/developer-tools/programming-language-tools/javascript-beautifier/">JavaScript Beautifier – Tools Directory</a>