JavaScript Beautifier

Paste minified or messy JavaScript and get clean, consistently indented code, or squeeze it into a compact minified version. Choose your indent, brace style and line wrapping. Your code stays in your browser.

How to use the JavaScript Beautifier

1. Paste your code into the left box, or press Upload .js to open a file.
2. Choose the options: indent size, brace style, blank lines and line wrap. Tick JSX for React components.
3. Press Beautify. The formatted code appears on the right and updates as you edit.
4. Or press Minify to remove comments and whitespace and see how many bytes you save.
5. Copy the result or Download it as a .js file.

Brace styles compared

The same function formatted with each brace style:

if (ok) {
    run();
} else {
    stop();
}

if (ok)
{
    run();
}
else
{
    stop();
}

if (ok) {
    run();
}
else {
    stop();
}

Collapse, preserve inline behaves like collapse but leaves short blocks such as { x: 1, y: 2 } or if (a) { b(); } on one line when you wrote them that way.

What the minifier removes and what it keeps

• Removed: line comments, block comments (except /*! license comments if the option is on), indentation, blank lines and spaces that are not needed between tokens.
• Kept exactly: the contents of strings, template literals (including nested ${…} expressions) and regular expression literals such as /\/\*.*\*\//g.
• Kept for safety: a line break wherever automatic semicolon insertion could depend on it, for example after return, break, throw and yield, around ++ and --, and between two statements written without semicolons. A space stays between tokens that would otherwise merge, such as a - -b or 1 .toString().
• Not done: renaming variables, removing dead code or rewriting expressions. Those need a full parser-based minifier such as Terser, esbuild or SWC, which typically save another 20 to 40 percent.

Reading minified code: practical tips

• Beautify first, then use your browser's search to find string literals such as error messages or URLs, which survive minification unchanged.
• Single-letter names like e, t and n are usually function parameters renamed by the minifier. Rename them in your copy as you work out what they do.
• Patterns like !0 and !1 mean true and false, void 0 means undefined, and a && b() is a compact if (a) b().
• If a //# sourceMappingURL= comment is present, the original sources may be available in the browser developer tools, which is far better than any beautifier.

Which settings match popular style guides?

For a team project, the settings matter less than applying them everywhere. Once you have picked a style, a formatter in your editor or a pre-commit hook keeps every file consistent automatically.

Frequently asked questions

Related tools