JavaScript Formatter & Minifier

How to use the JavaScript formatter

1. Paste your JavaScript into the input box.
2. Click Beautify to re-indent the code with js-beautify, putting statements and blocks on separate lines.
3. Click Minify to compress it with Terser, which removes whitespace and comments and shortens local variable names.
4. If minification fails, the error message points to the syntax problem in your code.
5. Copy the output.

Both libraries run inside your browser. Your code is never uploaded or stored, and it is only parsed and transformed, never executed.

Beautifying vs minifying JavaScript

JavaScript shipped to browsers is usually minified: whitespace and comments are stripped, local variables are renamed to single letters and some expressions are simplified. This reduces download size and is a standard step in production builds, alongside gzip or Brotli compression.

Minified code is unreadable, though. When you need to understand a third-party script, investigate what a bookmarklet does, or debug an error on a live site without source maps, beautifying restores line breaks and indentation so the control flow is visible again. It cannot restore original variable names or comments, because the minifier threw them away.

For example, Terser can turn this:

function totalPrice(items) {
  // sum line totals
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}

into something like:

function totalPrice(t){let e=0;for(const o of t)e+=o.price*o.quantity;return e}

The function name stays because it is a top-level declaration that other code may call; the parameter and local variables are renamed because nothing outside the function can see them.

Common JavaScript errors and how to fix them

Terser needs a complete parse of your code, so it is a quick way to find syntax errors:

• Unexpected token / unexpected end of input. Usually an unbalanced {, ( or [. Beautify the code first: the place where indentation stops making sense is close to the missing bracket.
• Unterminated string or template literal. A quote or backtick that is never closed, often caused by a line break in a normal string. Use template literals for multi-line text.
• Invalid syntax in non-JavaScript code. TypeScript type annotations and JSX are not standard JavaScript. Compile them first, then minify the output.

A subtle problem appears with automatic semicolon insertion. A line beginning with ( or [ continues the previous statement:

const greeting = "hi"
[1, 2].forEach(n => console.log(n))

This is parsed as const greeting = "hi"[1, 2].forEach(…), which evaluates "hi"[2] (undefined) and throws a TypeError. Ending statements with semicolons, or starting such lines with ;, avoids it. Beautifying shows the joined statement clearly.

Tips and best practices

• Minify in your build pipeline and generate source maps, so production errors map back to readable code.
• Avoid code that relies on function or class names at runtime (fn.name) unless you configure the minifier to keep them.
• Never paste secrets into client-side JavaScript: minification is not obfuscation, and anyone can beautify it again.
• Minified code often contains Base64 strings or encoded URLs; decode them with the Base64 decoder or URL decoder.

Frequently asked questions

Can beautifying recover the original source code?

Only partly. It restores structure and indentation, but comments and original local variable names removed during minification are gone. A source map, if the site publishes one, is the only way to get them back.

Is minified JavaScript secure or obfuscated?

No. Minification makes code smaller, not secret. Anyone can beautify it and read the logic, so never rely on it to hide API keys or business rules.

Does it support modern JavaScript?

Yes. Terser supports modern ECMAScript syntax such as arrow functions, classes, async/await, optional chaining and modules.

Can I format JSON here?

You can, but the JSON formatter is a better fit: it validates strictly against the JSON standard and reports errors by line and column.