Code Unminifier
Restore readable structure to minified bundles. Auto-detects the language, picks safe defaults, and lets you override indentation, line wrap, and brace style. Behaviour is purely formatting — your code's semantics stay intact.
Minified in, readable out
Same code, different shape. Behaviour is identical — only whitespace, line breaks, and indentation differ.
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 code, fast
Reading bundled output, debugging without source maps, or auditing a third-party script.
Debugging without sourcemaps
Pretty-print a production bundle so stack traces and devtool stepping become followable again.
Auditing third-party scripts
Inspect an analytics tag, ad pixel, or vendor SDK with proper indentation before you trust it on your site.
Learning by reading
Format a popular open-source library to see how it's organized — minified output is unreadable; beautified is approachable.
Diff before review
Beautify both old and new versions of a file before running them through the Diff Checker — line-based diffs only work on real lines.
JSON pretty-print
Drop a one-line API response in and get back a tidy nested view — same as JSON.stringify(x, null, 2), no DevTools needed.
HTML & XML cleanup
Re-indent server output, build artifacts, or scraped HTML before pasting into documentation.
How to use the unminifier
From paste to readable in three clicks.
Paste or drop your code
Paste minified code into the left editor or drop a file onto the upload area. The tool detects JavaScript, CSS, HTML, XML, and JSON automatically — override the language if it guesses wrong.
Pick your style
Choose 2 / 4-space or tab indentation, brace style, line-wrap length, and whether to preserve blank lines. Defaults match modern conventions for each language.
Click Beautify
The right editor fills with the formatted result. Stats below show original / output size, line counts, and the detected language.
Copy or download
The toolbar icons copy to clipboard or download as a file with the right extension for the detected language.
Frequently asked questions
Everything worth knowing about beautifying code.
Unminifying restores the readable structure of code that's been compressed for production: indentation, line breaks, consistent spacing.
It can't recover the original variable names if a minifier has mangled them — the renaming is one-way without a source map. But it makes the structure followable again so you can debug or audit the code.
No — purely formatting changes. Whitespace and line breaks don't affect JavaScript, CSS, HTML, XML, or JSON semantics. The same minified bundle and the beautified version produce identical results when run.
(One subtlety: this tool does not enable js-beautify's unescape_strings or e4x options by default — both of those would touch string literals or interpret < as XML, which can change semantics. They're off here on purpose.)
Not without a source map. Modern minifiers (Terser, esbuild, SWC) rename identifiers (foo → a, b, c…). That's a one-way transform.
If the original project ships a .map file, Chrome DevTools and Firefox DevTools can show you the original source. Without a source map, only structure and string literals survive the round trip.
By looking at characteristic markers:
- JSON — input parses successfully via
JSON.parse. - XML — starts with
<?xmlor contains anxmlnsattribute. - HTML — contains
<!DOCTYPE html>or any of<html>,<body>,<script>,<style>. - CSS — declaration-block shape with property:value pairs (e.g.
color: red;) and no JS-only constructs. - JavaScript — fallback for anything else.
The detection is a hint — if it gets it wrong, override the dropdown to the correct language.
No. js-beautify and the editor both run locally in your browser. Your code never leaves the page.
A few hundred kilobytes is comfortable. Multi-megabyte bundles will work but may take several seconds — js-beautify is single-threaded JavaScript and recurses through the entire AST. For very large bundles, consider running js-beautify or prettier from the command line.
JSON is parsed strictly via JSON.parse, then reformatted with JSON.stringify. Strict JSON requires double-quoted keys, no trailing commas, no comments.
JavaScript object literals (single quotes, unquoted keys, trailing commas) aren't valid JSON, so the tool falls back to the JS beautifier — which preserves the looser syntax.
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. For production-quality TS/JSX formatting, run Prettier or the TypeScript language server's built-in formatter.
About code beautification
Beautification — also called pretty-printing or unminification — is the inverse of minification. Where a minifier strips whitespace, comments, and shortens names to make a bundle small, a beautifier puts whitespace and structure back in to make the file readable.
What it can recover
- Indentation and line breaks — entirely.
- Brace and bracket style — your choice.
- Sensible spacing around operators, commas, parentheses.
- Line length / wrap — configurable cap.
What it can't recover
- Original variable names. If a minifier renamed
userProfileSettingstoa, the beautifier seesaand producesa. - Comments. Minifiers strip them; beautification can't reinvent them.
- Inlined / dead-code-eliminated logic. If a minifier collapsed two branches into one, beautifying won't bring the second back.
Use a source map when you have one
For real debugging of production code, a .map file mapping minified positions back to original source is the right answer. Beautification is what you reach for when no source map exists — when reading a vendor script, an unfamiliar bundle, or an old artifact.
About the engine
This tool wraps js-beautify 1.14, the same library used by VS Code's built-in formatter and dozens of editor plugins. JSON is handled directly via JSON.parse + JSON.stringify for canonical output. CodeMirror provides syntax-highlighted editors.
Settings that change behaviour
js-beautify has a few options that subtly change code rather than just whitespace:
unescape_strings— decodes\xNNsequences in string literals. Off here by default because it modifies what your strings actually contain at runtime.e4x— enables Mozilla's deprecated XML-in-JS extension, which interprets<in JS as XML literals. Off here by default because in modern code that's always wrong.
You can leave these off and trust that beautification is a pure formatting transform.