JavaScript Formatter

Developer Tools Programming Language Tools

Paste JavaScript and the formatter re-lays it out as you type: one statement per line, a line break after each opening brace, spaces around operators and after commas. For example, function add(a,b){return a+b} becomes a three-line function with the return statement indented two spaces.

About this tool

Minified bundles, snippets copied from a console, and code pasted through chat apps tend to arrive as one long line. Reading that is slow, and reviewing it is error-prone. This formatter splits the code into tokens, then rebuilds the layout: braces in K&R style, object properties one per line, a space after keywords such as if and for, and none inside parentheses. Strings, template literals, regex literals and comments pass through exactly as written. You also see line, token and comment counts and the deepest nesting level, plus a warning when brackets do not pair up. It is a layout pass, not a parser: it does not add missing semicolons, rename anything or check that the code runs, and JSX or TypeScript types may lay out unevenly.

How to use it

Add the code
Paste JavaScript into the box or open a .js or .txt file from your device; it is read locally.
Pick an indent
Choose 2 spaces, 4 spaces or a tab to match your project's style.
Check the warnings
A bracket warning means a { ( or [ has no partner, so the layout after it may be shifted.
Copy the result
Copy the formatted code back into your editor or review comment.

Examples

Minified function

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

Result Formatted code: function add(a, b) {
return a + b
}
Lines: 3
Tokens: 13
Comments: 0
Deepest nesting: 1
Characters in: 29
Characters out: 37

Split the code into 13 tokens; strings, template literals, regex literals and comments are copied unchanged.
Opened a new line after each { and ; and between object properties, indenting 2 spaces per level (deepest level: 1).
Put one space around binary operators and after commas, and none inside ( ) or [ ], giving 3 lines.

The body moves onto its own indented line, and spaces appear after the comma and around the plus sign.

Object literal with an array

JavaScript code: const o={a:1,b:[1,2]};
Indent: 4 spaces

Result Formatted code: const o = {
a: 1,
b: [1, 2]
};
Lines: 4
Tokens: 17
Comments: 0
Deepest nesting: 1
Characters in: 22
Characters out: 38

Split the code into 17 tokens; strings, template literals, regex literals and comments are copied unchanged.
Opened a new line after each { and ; and between object properties, indenting 4 spaces per level (deepest level: 1).
Put one space around binary operators and after commas, and none inside ( ) or [ ], giving 4 lines.

Each property gets its own line inside the braces, while the short array stays inline with a space after its comma.

if and else on one line

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

Result Formatted code: if (x > 1) {
y = 2
} else {
y = 3
}
Lines: 5
Tokens: 17
Comments: 0
Deepest nesting: 1
Characters in: 21
Characters out: 39

Split the code into 17 tokens; strings, template literals, regex literals and comments are copied unchanged.
Opened a new line after each { and ; and between object properties, indenting 2 spaces per level (deepest level: 1).
Put one space around binary operators and after commas, and none inside ( ) or [ ], giving 5 lines.

A space separates if from its parenthesis, and else stays on the same line as the closing brace.

How it is calculated

tokens → layout rules → indented lines (indent = nesting depth × indent unit)

tokens: identifiers, numbers, strings, template literals, regex literals, comments and operators read from the source
nesting depth: how many unclosed { braces surround the current line
indent unit: 2 spaces, 4 spaces or one tab, as chosen

The code is first split into tokens, so a comma inside a string or a slash inside a regex is never mistaken for punctuation. A slash counts as a regex start when it follows an operator, an opening bracket or a keyword such as return. Layout then follows the Google JavaScript Style Guide: a line break after each opening brace and statement-ending semicolon, the closing brace on its own line, else, catch and finally kept beside it, one space around binary operators and arrows, and a space after commas. Semicolons inside a for header stay on one line, and a line break in the source that ends a statement without a semicolon is kept.

When not to use it

For a codebase with an agreed Prettier or ESLint config, run that tool so diffs stay consistent.
For JSX, TypeScript type annotations or decorators, a syntax-aware formatter handles the layout better.
To recover original variable names from minified code, since formatting cannot undo renaming.

Common mistakes

Expecting missing semicolons to be added; the formatter changes whitespace only.
Pasting only part of a function, which leaves braces unpaired and shifts the indentation.
Mixing tab output into a file that uses spaces, which shows as uneven indents in review tools.

Frequently asked questions

Does formatting change what my code does?

No. Only whitespace between tokens changes. Strings, template literals, regex literals and comments are copied exactly, and no token is added, removed or renamed, so the program behaves the same as before.

Which brace style does it use?

K&R, also called Egyptian brackets: the opening brace stays at the end of the line that starts the block, the closing brace gets its own line, and else, catch or finally follow on the same line as that closing brace. This is the style the Google JavaScript Style Guide and Prettier both use.

How does it tell a regex from a division sign?

By looking at the token before the slash. After a value such as a name, number or closing parenthesis, a slash is division. After an operator, an opening bracket, a comma or a keyword like return, it starts a regex literal, which is then copied unchanged.

Can it reverse minification?

It restores line breaks and indentation, which makes minified code readable again. It cannot bring back the original variable names, comments or file structure that a minifier removed, because that information is no longer in the file.

Why is there a bracket warning?

Every { ( and [ should have a matching closer. When the counts do not pair up, usually because a snippet was cut mid-function, the formatter still produces output but warns you, since the indentation after the gap may be off by a level.

Is my code uploaded anywhere?

No. Tokenising and layout run in your browser, and an opened file is read on your device. Nothing is sent to a server while you format.

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 Formatter. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/developer-tools/programming-language-tools/javascript-formatter/

MLA

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

Chicago

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

Link

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