devtools

JavaScript Beautifier & Minifier

Beautify or minify JavaScript in your browser. Re-indent messy code or strip comments and whitespace, with a scanner that understands strings and regex.

Runs entirely in your browser — your data never leaves your device.

How to use JavaScript Beautifier & Minifier

What it does & when you need it

You've opened a bundle, a vendor script, or a snippet someone pasted into a ticket, and it's one dense line with no line breaks — or the opposite, a sprawl of inconsistent spacing you'd like to tidy before committing. This tool does both directions. Beautify re-indents JavaScript into a readable, consistent layout; Minify strips comments and redundant whitespace to shrink the source. Everything runs in your browser, so proprietary or unreleased code never touches a server — paste freely.

Reach for it when you want to read minified or machine-generated output, sanity -check a small script before shipping it inline, or normalize whitespace so a diff shows real changes instead of formatting noise.

How to use

  1. Paste your JavaScript into the input.js buffer, press Sample to load a small annotated function, or Upload a .js / .mjs file.
  2. Pick a mode with the toggle. Beautify expands and indents; Minify compresses. The output buffer updates live as you type or switch modes.
  3. The status bars report byte counts on both sides, so you can see exactly how much minifying saved. Press Copy result (or Ctrl / Cmd + Enter) to copy the output, or use the buffer's own Copy button.

Things worth knowing

This is a whitespace-and-comment minifier, not a compressor. It deletes line and block comments and collapses insignificant spacing, but it never renames a variableName to a and never reorders or dead-code-eliminates anything. That keeps the result readable and safe, but it also means the savings are modest. For production builds you want a real minifier such as Terser or esbuild: because they parse the code into an AST, they can mangle identifiers, fold constants, and drop unreachable branches, shrinking payloads far more than a scanner ever can. Think of this tool as a quick cleanup, not a build step.

Newlines are preserved on purpose, so Automatic Semicolon Insertion is unchanged. JavaScript's ASI rules are sensitive to line breaks — most famously, a return sitting on its own line above its value returns undefined, because a semicolon is inserted right after return. A naive minifier that joins everything onto one line would silently change that behavior. This one keeps the original newlines, so code that relied on ASI (for better or worse) behaves exactly as it did before.

It actually understands the lexical grammar, so it won't corrupt your code. The scanner tracks whether it's inside a single- or double-quoted string, a template literal, or a regular-expression literal. That means a // sitting inside a string is left alone rather than treated as the start of a comment, and a / inside a regex like /a\/b/g is never mistaken for a division operator or a comment delimiter. This is the class of bug that trips up regex-based find-and-replace hacks — if you're crafting those patterns, the Regex Tester is the right companion tool.

Beautify imposes one consistent brace and indent style. Whatever the input's spacing, the output uses a single predictable convention, which is what makes minified or machine-generated code legible again. It's the JavaScript sibling of the JSON Formatter and CSS Formatter: same idea, applied to a different grammar. For markup, reach for the HTML Formatter instead.

Examples

Expand a one-line function

function total(items,rate){let s=0;for(const i of items){s+=i.price}return s*(1+rate)}

Beautify re-indents the compressed source into a readable, consistently braced layout.

Strip comments from a snippet

let x = 1; // count
/* reset */ let y = 2;

Minify removes both comment styles and collapses whitespace without renaming x or y.

Preserve a regex literal

const slug = str.replace(/[^a-z0-9]+/gi, '-'); // safe url

The slash inside the regex is understood, so minifying never breaks the pattern.

Frequently asked questions

Does this beautifier upload my JavaScript to a server?

No. Beautifying and minifying both run entirely in your browser, so unreleased or proprietary source is never sent anywhere. You can safely paste internal code.

Will minifying rename my variables like a real bundler does?

No. It only removes comments and redundant whitespace — identifiers and code order are untouched. For maximum shrinkage in production, run Terser or esbuild, which parse the AST and mangle names.

Is it safe to minify code that relies on automatic semicolon insertion?

Yes. The minifier preserves the original newlines, so ASI behaves exactly as before — a `return` on its own line still returns undefined rather than being joined to the next expression.

Will a // inside a string or a slash in a regex get mangled?

No. The scanner tracks strings, template literals and regex literals, so a `//` inside a string is not treated as a comment and a `/` in a pattern like /a\/b/g is not mistaken for division.

What is the difference between Beautify and Minify here?

Beautify re-indents into one consistent brace-and-indent style so machine-generated or minified code becomes readable. Minify strips comments and spacing to reduce byte size while keeping behavior identical.

Related tools

JSON Formatter & ValidatorFormat, validate and minify JSON in your browser. Pretty-print with 2/4-space or tab indent, sort keys, and get parse errors with the exact line and column.CSS Beautifier & MinifierMinify CSS online to shrink file size, or beautify messy stylesheets into readable, indented rules. Runs entirely in your browser — nothing is uploaded.HTML FormatterBeautify or minify HTML in your browser. Re-indent messy markup or strip comments and whitespace to shrink payloads. Private, offline, and instant.Regex Tester & DebuggerTest and debug regular expressions online in your browser. See every match, numbered and named capture groups, and flag toggles — private, nothing uploaded.