JavaScript Beautifier

Format minified or messy JavaScript into readable code.

About JavaScript Beautifier

A JavaScript beautifier re-indents minified or messy JS into readable code, with your choice of indent and brace style. It formats JSON too.

How to use

  1. Paste JavaScript or JSON, or load a .js, .mjs, .ts or .json file. The output updates as you type.
  2. Choose the indent: 2 spaces, 4 spaces or a tab.
  3. Pick a brace style and whether blank lines and spaces inside parentheses are kept.
  4. Copy the result or download it as .js, named after the loaded file.

Options

  • Indent: 2 spaces, 4 spaces or tabs.
  • Brace style: collapse keeps the opening brace on the same line (if (x) {), expand puts every brace on its own line, and end-expand keeps opening braces on the line but moves else and catch onto a new one after the closing brace.
  • Keep blank lines: preserves the blank lines in the source, at most two in a row. Off, the output has no blank lines.
  • Space in parens: writes foo( a, b ) instead of foo(a, b).
  • The formatter is js-beautify, which works on tokens rather than a full parse, so it never rejects input. Broken or partial code comes out indented as well as it can be, and a missing semicolon or a syntax error is not reported.
  • Minifying is not offered: shrinking JavaScript safely needs a real parser and scope analysis, which is a build-tool job (esbuild, terser). For stylesheets, the CSS Minifier on this site does minify.

Example

function add(a,b){return a+b}const o={a:1,b:[2,3]};
→
function add(a, b) {
  return a + b
}
const o = {
  a: 1,
  b: [2, 3]
};

Privacy

Formatting runs in the browser. No request is made, and nothing is stored.

Frequently asked questions

What does a JavaScript beautifier do?
It adds line breaks, indentation and spacing to JavaScript so the structure is visible, without changing what the code does. It is the reverse of minifying, except that shortened variable names cannot be restored.
Can you unminify JavaScript?
Partly. A beautifier restores formatting, so the control flow and structure become readable again, but names that a minifier shortened to single letters stay short, and comments that were stripped are gone. A source map is needed to get the original back.
Does formatting change what the code does?
No. Whitespace and line breaks outside strings and template literals have no meaning in JavaScript, with one exception: a return, throw, break or continue followed by a newline. The beautifier knows this rule and keeps the expression on the same line.
Which brace style should I use in JavaScript?
Most JavaScript style guides, including Airbnb, Google and StandardJS, put the opening brace on the same line as the statement, which is the "collapse" option here. Allman style (braces on their own lines) is common in C# but rare in JavaScript.