JavaScript Formatter

This JavaScript formatter (also called a JS formatter or JavaScript beautifier) adds line breaks and indentation to minified or crammed scripts so you can read them, and its Minify button strips comments and extra whitespace. It scans the code character by character in your browser without parsing it, so some output needs a check before you run it.

How to use the JavaScript formatter

1. Paste your code into the Input JavaScript box, or press Try Example to load a sample module.
2. Choose 2 spaces, 4 spaces or Tab from the Indent menu.
3. Click Beautify, or press Ctrl+Enter (Cmd+Enter on a Mac) in the input box. Click Minify to go the other way.
4. Read the output, fix the arrow function case described below if it appears, and press Copy.

Under the input box, the JavaScript formatter shows the size of the input and output in characters and bytes.

What Beautify does to your code

The JavaScript formatter's Beautify button starts a new line after every opening bracket, comma and semicolon, and puts each closing bracket on its own line. A brace that follows a closing bracket, as in a function or an if statement, starts a line of its own too. Arguments, object properties and the three parts of a for loop header end up one per line. Comments, strings and template literals are kept as written.

It only moves whitespace. It does not add spaces around operators or after colons, so tight minified code stays tight within each line. This input:

function total(items){let sum=0;for(const it of items){sum+=it.price*it.qty;}return sum;}

comes out with 2-space indentation as:

function total(
  items
)
{
  let sum=0;
  for(
    const it of items
  )
  {
    sum+=it.price*it.qty;
  }
  return sum;
}

Code that the formatter can break

Because the JavaScript formatter has no parser, a few patterns come out wrong. Check for them before you run formatted or minified code.

Arrow functions with brackets

An arrow function with its parameters in brackets gets => on a new line. const add = (a, b) => a + b; becomes:

const add = (
  a,
  b
)
=> a + b;

JavaScript does not allow a line break before =>, so this is a syntax error. Move => back up to the line with the closing bracket. A single parameter without brackets, such as x => x * x, is not affected.

Regular expressions with two slashes

The formatter does not recognise regular expression literals. A pattern with two slashes in a row, such as /\/\//g, is read as the start of a comment. Beautify then leaves the rest of that line unformatted, and Minify deletes it, which breaks the code.

Minify and missing semicolons

Minify removes comments and line breaks but keeps variable names and does not add semicolons. Code that relies on line breaks to end statements stops working once it is joined into one line, and a + +b turns into a++b. Add semicolons first, or use a build tool for production minification.

JS beautifier or a parser-based formatter

For reading a minified bundle or a snippet copied from a page's source, this JS beautifier is quick: paste and click. For code you will commit, format JavaScript with a tool that parses it, which gives safer output and consistent spacing. Prettier is the usual choice, from the command line with npx prettier --write app.js or through an editor extension, and VS Code has a built-in Format Document command.

If the code is really JSON data, format it in the JSON formatter, which parses and validates it; how to format JSON in your browser shows the steps. Test a pattern the formatter mangled in the regex tester, and tidy the matching stylesheet with the CSS formatter. More tools are under developer tools.