JavaScript Beautifier

Paste code or drop a .js file onto the input, set your style, and press Beautify. The tool uses js-beautify, a long-established formatter, to add line breaks and indentation, put spaces around operators, and lay out nested blocks, arrays and objects so the structure is visible again.

• Indent: two spaces, four spaces or tabs.
• Braces: keep the opening brace on the same line (K&R style), put it on its own line (Allman), or end blocks on their own line.
• Wrap long lines: break lines that exceed 80 or 120 characters at sensible points, or leave them as they are.
• Keep blank lines: preserve up to two blank lines from the original.

Your last settings are remembered in your browser, so the output matches your team style next time. The code is processed locally and is not uploaded.

Minified input:

function add(a,b){if(a>b){return a+b}else{for(let i=0;i<3;i++){console.log(i)}}return [a,b].map(x=>x*2)}

Beautified with two spaces:

function add(a, b) {
  if (a > b) {
    return a + b
  } else {
    for (let i = 0; i < 3; i++) {
      console.log(i)
    }
  }
  return [a, b].map(x => x * 2)
}

Nothing about the behaviour changed. Only whitespace was added, so the beautified code runs the same as the original.

Formatting restores layout, not information. Variable names that were mangled by a minifier (a, b, o) stay mangled, and comments that were stripped are gone for good. For reading production bundles it is still the first step, followed by searching for string literals and property names that survive minification.

Beautifying also does not fix errors: syntax mistakes are passed through as best as possible, so run code through a linter or the minifier, which reports syntax errors with line and column, if you need validation. For JSON data, use the JSON formatter, which validates strictly.