JavaScript Formatter

What it does

The JavaScript Formatter turns minified or messy JavaScript into readable code with consistent indentation, one statement per line and spacing around operators. It is useful for reading a minified bundle, a script copied from a web page, or code written by several people in different styles.

How to use it

1. Paste the code into Input, or click Sample.
2. Click Beautify.
3. Choose 2 spaces, 4 spaces or Tab, and tick Keep blank lines to keep the blank lines you already had.
4. Copy or download the output. Use output moves it back into the input for further changes.

Example

function total(t){let o=0;for(const n of t)o+=n.price*n.qty;return o}

Beautified with 2 spaces:

function total(t) {
  let o = 0;
  for (const n of t) o += n.price * n.qty;
  return o
}

Good to know

• Formatting changes only whitespace and line breaks. Names shortened by a minifier stay short: the formatter cannot know that t used to be items.
• JSON is valid JavaScript, but the JSON Formatter is better for it because it also validates.
• TypeScript usually formats well too, as long as it does not use syntax that plain JavaScript lacks, such as decorators.

FAQ

Is this the same as Prettier? No. It uses js-beautify, which keeps your code's structure and only re-indents it. Prettier rewrites code to its own style, which is better as a team standard inside a project.

Can it undo minification completely? It restores the layout, not the original names or comments, which minification removes for good.