/tools/javascript-formatter

JavaScript Formatter

Restore indentation and line breaks to compressed or badly formatted JavaScript. Strings, template literals, comments and regular expressions are recognised and left intact.

JavaScript FormatterRuns in your browser
What this does: it re-indents code and splits statements onto their own lines. It is not a full parser, so it will not rewrite your syntax, rename anything or reflow long expressions. Broken code stays broken — but it becomes readable enough to fix.
Indent

How to use the JavaScript Formatter

  1. Paste JavaScript — minified, compressed or just untidy.
  2. Choose an indent width and press Format.
  3. Read the result, then copy it or download it as a .js file.

Why formatting JavaScript is harder than JSON

JSON has one unambiguous grammar. JavaScript has several constructs where the same character means different things depending on what came before it, and a formatter that ignores this produces mangled output.

The hardest case is the forward slash. In a / b it is division; in str.split(/,/) it starts a regular expression. Telling them apart requires knowing whether an expression is currently expected — this tool decides from the previous significant character, which handles ordinary code correctly. Template literals are the other trap: everything between backticks is data, including newlines and braces, except inside ${…} where code resumes.

What this tool will not do

It is an indenter, not a printer. Tools like Prettier parse your code into a syntax tree and print it back from scratch, which lets them wrap long argument lists, normalise quotes, add or remove semicolons and reformat chained calls. That requires a full JavaScript parser.

This tool works on the token stream instead. The trade is deliberate: it loads instantly, it never rewrites code it did not understand, and it happily formats a file with a syntax error — which is often exactly when you need to read it. For consistent project-wide style, use a proper formatter in your editor and commit hooks.

A common use: reading minified code

The most frequent reason to reach for this is a compressed bundle you need to understand — a third-party script, an error trace pointing at column 14,208, or a snippet from a page you are debugging. Formatting turns one enormous line into something you can scroll. Variable names stay mangled, since only a source map can restore those, but control flow becomes visible.

Frequently asked questions

Does it change what my code does?

It only inserts and removes whitespace and line breaks outside strings, comments, template literals and regular expressions. Behaviour is unchanged — with one caveat below about semicolons.

Is it safe on code without semicolons?

Mostly, because line breaks are added where statements already ended. But automatic semicolon insertion is subtle, so if you write in a semicolon-free style, review the output before running it.

Can it format TypeScript or JSX?

It will not crash, but type annotations and JSX tags are treated as ordinary tokens, so indentation around them is approximate. A TypeScript-aware formatter will do better.

Can it un-minify variable names?

No. Minifiers discard the original names entirely. Only a source map published alongside the bundle can recover them.

Is my code uploaded?

No. Everything runs in your browser, so proprietary or unreleased code never leaves your machine.

Related tools