JavaScript Formatter & Minifier

What is a JavaScript formatter?#

A JavaScript formatter takes code that is hard to read — minified output from a bundler, a collapsed snippet copied out of a chat, or just a file that has been edited by five people with five different indentation habits — and rewrites it so the structure is visible. Indentation matches the nesting, operators get consistent spacing, and statements end where you expect them to. A good formatter also does the reverse: strip everything non-essential when you need the smallest possible payload.

This page does both jobs, and it is honest about how each one works. Format is driven by Prettier’s standalone build using the Babel parser — the same engine many teams run in their editor on save, so the output here matches what your project would produce. Minify is deliberately conservative: it strips comments and collapses whitespace while keeping every newline, so automatic semicolon insertion (ASI) never breaks. It is not a token-level minifier like esbuild or terser — it does not rename variables, drop dead code, or mangle property names. That makes it safe to feed the result straight back to a JS engine, but it is the wrong tool for shrinking a production bundle. Knowing the difference is the whole point of using it well.

How to use it#

1. Paste your JavaScript into the JavaScript pane on the left, or click Sample to load a short example.
2. Choose an Indent style on the toolbar: 2, 4, or tab. Two spaces is the near-universal default in modern projects; pick tab only if you are about to paste into an editor configured for tabs.
3. Click an action:
   • Format — re-prints the code through Prettier with the chosen indent. Semicolons are emitted by default, matching Prettier’s standard behaviour.
   • Minify — removes // line comments and /* */ block comments, collapses runs of spaces and tabs, and drops trailing whitespace on each line. Newlines are kept on purpose.
4. Read the result in the Output pane on the right. Use Copy in the output header to grab it. Clear empties both panes.

If Format cannot parse your input (a stray bracket, an unterminated template literal), the status bar shows Prettier’s error message instead of producing broken output — so you fix the real problem rather than chasing a misleading reformat.

Key features#

• Real Prettier engine. Format runs the standalone Prettier build with the Babel + estree plugins, not a hand-rolled beautifier. What you get here is what prettier --write produces.
• ASI-safe minify. Newlines are preserved during minification, so a line that relied on automatic semicolon insertion keeps working. Removing newlines blindly is exactly how casual “minifiers” introduce bugs.
• String, regex and template aware. The comment stripper knows the difference between // inside a string and a real line comment, and between / as division and as the start of a regex literal — so it never chews into your code.
• Two-pane, copy-ready. Input and output sit side by side; output is read-only with a one-click copy.
• Runs entirely in your browser. There is no backend and no upload. Prettier is bundled into the page and loaded on demand, so the script still satisfies a strict self-only content security policy.

Worked example#

A function copied out of an old gist, comments and inconsistent indentation included:

Input:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Click Format with 2 spaces:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier fixes the crooked indent, spaces the operators consistently, and adds semicolons — but leaves the block comment exactly where it was. Now click Minify on the original input instead:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

The comment is gone, the stray indent is gone, but every statement still sits on its own line. Note what did not happen: fetchUser was not shortened, "GET" was not transformed, the arrow function kept its parameter list. This is readable compression, safe to paste back into a script tag — not the aggressive mangling a bundler would do at build time.

FAQ#

Why does Minify not rename variables or shrink my bundle?#

Because doing that correctly requires a full parser-and-codegen pass (scope analysis, property tracking, side-effect detection). This tool’s minify is intentionally a scanner: it is fast, dependency-light, and provably cannot change runtime behaviour. For a production bundle, run a real bundler offline; use this page for quick clean-ups, pasting into a doc, or preparing a snippet someone else will read.

Does the minifier strip comments inside strings?#

No. The scanner walks the source character by character and tracks whether it is currently inside a single-quoted string, a double-quoted string, a template literal, or a regex literal. A // that appears inside any of those is treated as text and left alone; only real comments are removed.

Does it handle TypeScript or JSX?#

The Format path uses the Babel parser, which accepts JSX. TypeScript type annotations and .ts/.tsx-specific syntax are not enabled here — if you need those, this tool will report a parse error rather than silently producing wrong output. Keep this page for plain JavaScript.

Is my code uploaded anywhere?#

No. Everything runs in the tab you are looking at. Prettier is bundled with the page and imported on demand; your source text is parsed in memory and never sent over the network.