JS Formatter

JS Formatter

Paste JavaScript into Paste or type your JavaScript, load the Example, or Open a file up to 5 MB (you can also drag it onto the page). Choose your options and click Format Code.

The result is shown with syntax colours, along with the line count and size before and after. Copy it, or Download it. The download is named after the file you opened.

The code is formatted in your browser and isn’t uploaded anywhere.

Example

A minified ES module, all on one line:

import formatPrice from"./money.js";export class Cart{#items=[];add(item){item.qty??=1;this.#items.push(item);return this}get total(){return this.#items.reduce((sum,i)=>sum+i.price*i.qty,0)}label(user){const name=user?.profile?.name??"guest";return`${name}: ${formatPrice(this.total)}`}}

Formatted with 2 spaces:

import formatPrice from "./money.js";
export class Cart {
  #items = [];
  add(item) {
    item.qty ??= 1;
    this.#items.push(item);
    return this
  }
  get total() {
    return this.#items.reduce((sum, i) => sum + i.price * i.qty, 0)
  }
  label(user) {
    const name = user?.profile?.name ?? "guest";
    return `${name}: ${formatPrice(this.total)}`
  }
}

The private field #items, optional chaining ?., the ?? and ??= operators and the template literal all come through intact.

Notice that return this still has no semicolon. The minifier dropped it, because a semicolon before } is optional. The formatter doesn’t put it back, because a semicolon is a token, and the formatter never adds, removes or changes tokens.

Checked before you see it

Only spaces and line breaks move. Before the result is shown, it’s read back with a JavaScript parser and compared with your original. If the two don’t parse to the same program, you don’t get the result.

That check matters because line breaks in JavaScript aren’t always harmless. When a line ends where a statement could end, JavaScript may insert a semicolon there. This is called automatic semicolon insertion. The classic example:

return
  total * rate;

This returns undefined, not the total. A semicolon is inserted after return, and the next line never runs.

So when Wrap lines at is set to 80, 100 or 120 characters, long expressions and argument lists are only broken after an operator or a comma. A line that ends in +, && or , can’t be a complete statement, so no semicolon is ever inserted there.

The same care applies to Opening brace on its own line. With it on, the brace of a function, class or if block moves to the next line:

function f()
{
  return {
    a: 1,
    b: 2
  }
}

But the object after return keeps its brace on the return line. Moving that one would turn the function into one that returns undefined.

Template literals are left exactly as written

Everything between backticks is part of a string, including the spaces at the start of each line. Re-indenting those lines would change the text your code produces. So they’re left alone, even when they look out of place:

function email(name) {
  if (name) {
    return `Hello ${name},
    thanks for signing up.
`;
  }
}

The second line of the string keeps the indentation it had in the source, even though the code around it was re-indented. When a template literal spans several lines, the notes point this out, so it doesn’t look like the formatter missed a spot.

When the input isn’t plain JavaScript

The notes under the result also flag three common mix-ups:

• It looks like HTML. A whole page or template was pasted. The HTML Formatter lays out the markup and the <script> blocks inside it.
• It’s valid JSON. Data rather than code. The JSON Beautifier is the better fit.
• A source map comment no longer matches. A line like //# sourceMappingURL=app.min.js.map refers to positions in the minified file, such as line 1, column 48,213. After formatting, those positions point at different code, so browser DevTools would highlight the wrong lines. Remove the comment from the formatted copy, or keep serving the minified file and its map.

What formatting can’t bring back

Formatting restores the layout, not what a minifier removed. If the minifier shortened customerTotal to t and deleted the comments, the formatted code will still say t and have no comments. The same is true of obfuscated code: you can see its structure, but the scrambled names and encoded strings stay as they are.

For code you’re going to edit, keep the original source, and minify a copy with the JS Minifier for production.

Options

Indent with: 2 spaces, 4 spaces or tabs.

Wrap lines at: no wrapping, or 80, 100 or 120 characters. Breaks only go after an operator or a comma, as explained above.

Opening brace on its own line: the brace that opens a block goes on the line after function f() or if (x). This is sometimes called Allman style. Off, it stays at the end of the line.

Keep blank lines: one empty line stays wherever the source has one or more, so the gaps you left between sections remain. Off, none stay. Minified code has no blank lines to keep.

FAQ

Will formatting change what my code does?

No. Only whitespace moves, and the result has to parse to the same program as your original before it’s shown.

Does it add missing semicolons?

No. That would add tokens. Code that relies on automatic semicolon insertion is formatted as it is.

Can it un-minify variable names?

No. The names a minifier shortened are gone from the file. Formatting gives you readable structure, not the original names.

How do I minify it again?

Use the JS Minifier.

Is my code uploaded?

No. Everything happens in your browser, and nothing you paste or open is stored.