JavaScript Beautifier
Restore readable structure to compressed or auto-generated JavaScript. Configurable indent, brace style, and line wrap. Powered by js-beautify — with safe defaults that don't rewrite your string literals or interpret < as XML.
Minified in, readable out
Same code, different shape. Behavior is identical — only whitespace, line breaks, and indentation change.
function calc(p,q,t){const s=p*q;return t?s*(1+t):s}document.getElementById("btn").addEventListener("click",function(){const r=calc(29.99,3,.08);console.log("Total:",r)});function calc(p, q, t) {
const s = p * q;
return t ? s * (1 + t) : s
}
document.getElementById("btn").addEventListener("click", function () {
const r = calc(29.99, 3, .08);
console.log("Total:", r)
});When you need readable JavaScript, fast
Reading bundled output, debugging without source maps, or auditing third-party code.
Debug without sourcemaps
Pretty-print a production bundle so stack traces and DevTools stepping become followable again.
Audit third-party scripts
Inspect an analytics tag, ad pixel, or vendor SDK with proper indentation before shipping it.
Learning by reading
Format a popular open-source library to understand how it's structured.
Diff before review
Beautify both versions before Code Diff — line-based diffs need real lines.
How to beautify JavaScript
Paste or drop your JS
Paste minified JS into the left editor or drop a .js file onto the upload area.
Pick your style
Choose 2/4-space or tab indent, brace style, line-wrap length. Defaults match modern conventions.
Click Beautify
js-beautify runs locally in your browser. The right editor fills with the formatted result.
Copy or download
Copy with one click, or download as beautified.js.
Frequently asked questions
No — purely formatting changes. Whitespace and line breaks don't affect JavaScript semantics. The same minified bundle and the beautified version produce identical results when run.
This tool explicitly disables js-beautify's two semantic-touching options (unescape_strings and e4x) so the output is a pure formatting transform.
Not without a source map. Minifiers rename userProfileSettings to a; the beautifier sees a and outputs a. Use a .map file in DevTools if available.
js-beautify handles plain JavaScript reliably. For TypeScript or JSX it does a reasonable job for most input but can confuse type annotations or JSX expressions. Use Prettier or the TS language server for production-quality TS/JSX formatting.
A few hundred kilobytes is comfortable. Multi-megabyte bundles will work but may take several seconds — js-beautify is single-threaded JS.
No. js-beautify is loaded as a static script from a CDN; everything runs in your browser.
About JavaScript beautification
Beautification is the inverse of minification. Where a minifier strips whitespace, mangles names, and packs everything onto one line, a beautifier puts whitespace and structure back in.
What this tool does
- Re-introduces line breaks and indentation
- Adds consistent spacing around operators, commas, parentheses
- Applies your chosen brace style and wrap length
- Preserves blank lines (up to two) when enabled
What it can't recover
- Original identifier names — those are lost in minification.
- Comments — minifiers strip them; the beautifier can't reinvent them.
- Inlined / dead-code-eliminated logic — once collapsed, gone.
Safe defaults
js-beautify has two options that subtly change code rather than just whitespace: unescape_strings (decodes \xNN in string literals — modifies what your strings actually contain) and e4x (Mozilla's deprecated XML-in-JS extension — interprets < as XML literal). Both are off here by default, so beautification is purely formatting.
Use a source map when you have one
For real production debugging, a .map file is the right answer. Beautification is what you reach for when no source map exists — vendor scripts, unfamiliar bundles, old artifacts.