JavaScript Formatter & Minifier
Beautify messy JavaScript or compact it for production — with real syntax validation, not find-and-replace.
Paste any JavaScript — minified bundles, copy-pasted snippets, code with broken indentation — and this tool parses it into a full abstract syntax tree (AST) with the Acorn parser, then re-emits clean, consistently formatted code (or a compact single-line build) using the escodegen generator. Because a real parser does the work, the output is guaranteed to be syntactically valid, and any syntax error in your input is reported with its exact line and column before anything is generated.
Format or minify your JavaScript
Auto-detect tries an ES-module parse first, then falls back to classic-script parsing —
so import/export files and plain browser scripts both just work.
Force a mode if you want a stricter check.
Minify mode compacts the code to a single line and (by default) removes comments. It is whitespace/comment minification — see below for what it deliberately does not do.
How this formatter actually works
Most quick “beautifiers” use regular expressions and text replacement to guess where
indentation and spaces should go. That approach breaks on edge cases: a string literal containing
{, a regex that looks like division, nested template literals, or an arrow function
inside a JSON-ish object. This tool takes the same route your editor’s linter does:
- Parse. The Acorn parser (MIT license) reads your JavaScript and builds an abstract syntax tree — the same structured representation JavaScript engines use. If the code is not valid JavaScript, this step fails and you get a precise error with line and column instead of silently mangled output.
- Generate. The escodegen generator (BSD license) walks the AST and prints new code, applying your formatting choices. Because it works from the syntax tree — not the original text — the output is always valid and never reorders or alters meaning.
Comments are collected during parsing and re-attached to their original positions, so a “keep comments” format preserves your documentation in place.
Formatting options explained
| Option | What it does |
|---|---|
| Indentation | How far each nesting level is indented: 2, 4 or 8 spaces, or tab characters. Matches your project’s style — 2 spaces is the most common convention in modern JavaScript. |
| String quotes | Normalises every string literal to single or double quotes. “Keep original” leaves each string’s existing quote style untouched (useful when mixing template literals and plain strings). |
| Semicolons | “Always add” terminates every statement explicitly — the safest choice, since it avoids automatic-semicolon-insertion (ASI) surprises. “Omit” produces the semicolon-free style some codebases prefer. |
| Parentheses | “Keep safe parens” adds parentheses where operator precedence could be misread (e.g. around conditional expressions used in assignments). “Strip unnecessary” removes redundant ones for a terser look. |
| Keep comments | Preserves // and /* */ comments at their original positions. Turn it off to produce a documentation-free version of the code. |
| Preserve blank lines | Keeps the empty lines you use to separate sections of code. Off by default, which collapses runs of blank lines down to a single one. |
What minification does — and what it deliberately doesn’t
Minify mode removes whitespace, newlines and (optionally) comments, producing a compact single-line build you can paste into a page or drop into a bundle. It is safe by construction: the code still goes through the full parse-and-regenerate pipeline, so the output is guaranteed to be syntactically valid JavaScript.
What it does not do is name mangling — shortening your
variable and function names to a, b, c — or
dead-code elimination and constant folding. Those optimisations require
whole-program analysis (they can change behaviour if they get a side effect wrong), which is
why production builds use dedicated tools like Terser or
esbuild with minify enabled. Use this tool when you want readable, compact, verified output
without installing anything; reach for Terser/esbuild when every kilobyte of a shipped bundle
matters and you can run a build step.
When to use which mode
- Format: cleaning up pasted or minified code before reading it, normalising indentation before a code review, or tidying a snippet before committing it.
- Minify: shrinking an inline
<script>block, preparing a small library for pasting into a page, or checking how much whitespace your file actually contains.
Related tools
Suggested
