Code Unminifier (Beautify)

What is a free code unminifier online?

A free code unminifier online is a tool that takes minified, compressed or obfuscated code and reformats it with proper indentation, line breaks and spacing so it becomes readable again. When a production build pipeline runs UglifyJS, Terser, CSSNano or html-minifier, the output collapses onto a single line with short variable names and no comments. That output is optimised for browsers, not for humans. An unminifier reverses the formatting — not the semantics — so you can read, debug, review or learn from the code.

This code beautifier and unminifier goes beyond the basics. It supports JavaScript, TypeScript, CSS, SCSS, LESS, HTML, JSON, XML, SVG and SQL, with a live before/after diff view, custom indentation, brace style and line-wrap options. It also includes a minifier for the reverse operation, a file-drop zone for pasting in .js, .css or .html files, and a built-in guide covering every language-specific option. Everything runs in your browser — no sign-up, no account, no upload, no tracking.

How to use this free code beautifier online

1. Select the language. Click the language button at the top (JavaScript, CSS, HTML, JSON, XML, SQL, SVG). Auto-detect is available if you are not sure.
2. Paste or drop your code. Paste directly into the textarea, or drag a file from your desktop onto the drop zone. Accepted extensions: .js, .ts, .css, .scss, .less, .html, .json, .xml, .svg, .sql.
3. Configure formatting options. Choose 2 spaces, 4 spaces or tabs. Set the brace style (collapse, expand, end-expand). Choose whether to preserve comments and blank lines. Set a maximum line length if you want wrapping.
4. Click Beautify. The formatted output appears below, with a live diff showing exactly what changed line by line.
5. Copy or download. Use the copy button or download the formatted file. Switch to the Minify tab to reverse the operation.

What minification actually does

Minification is a build-time optimisation that reduces file size by removing every character a browser does not need to execute the code. The main transformations are:

The critical distinction: formatting is reversible, semantics are not. An unminifier can restore indentation, line breaks and spacing, but it cannot recover variable names, comments, or deleted dead code. For full source recovery you need the original source map (.map file) produced by the minifier.

Language-specific formatting rules

JavaScript and TypeScript

JavaScript beautification inserts newlines after semicolons and braces, indents block statements, spaces around binary operators, and preserves string quoting. The js-beautify library — the same engine used inside VS Code, Atom and Sublime Text — powers the core formatting. Options include brace style (collapse, expand, end-expand), space-before-conditional, and jslint-happy mode for stricter spacing.

TypeScript is formatted with the same rules plus support for type annotations, generics, decorators and interfaces.

CSS, SCSS and LESS

CSS beautification expands each declaration onto its own line, indents nested rules, normalises spacing after colons and before braces, and converts rgb() and hex colours into a consistent form. SCSS and LESS get the same treatment with additional support for variables ($var, @var), mixins, nested selectors and control directives (@if, @each).

HTML and XML

HTML beautification indents nested tags, puts each attribute on a new line when the line would exceed the wrap length, preserves inline elements like <span> and <a>, and handles HTML5 void elements correctly. XML uses the same engine with self-closing tags, CDATA sections and processing instructions supported. SVG is treated as a special case of XML with additional handling for <path> data and <g> grouping.

JSON

JSON beautification uses JSON.parse followed by JSON.stringify with the chosen indent, which guarantees the output is valid JSON. The tool also validates the input and reports the exact position of any syntax error. For JSON with comments (JSONC, used in VS Code settings), a lightweight pre-processor strips the comments before parsing.

SQL

SQL formatting uppercases reserved keywords (SELECT, FROM, WHERE, JOIN), puts each clause on its own line, indents subqueries and CASE expressions, and aligns AND/OR conditions. Supported dialects: standard SQL, MySQL, PostgreSQL and SQLite. This is a rule-based formatter, not a full SQL parser, so it handles the common patterns used in application queries.

When to use an unminifier

• Debugging production code. When an error stack trace points to app.min.js:1:45832, you need the readable source to understand what went wrong.
• Reviewing a third-party library. Understanding how a vendor library behaves internally when the documentation is incomplete.
• Learning from real-world code. Studying how a production site implements a feature by reading its minified bundle.
• Security auditing. Inspecting a third-party script before adding it to your site.
• Recovering lost source. When the original source is no longer available and only the minified bundle exists.
• Code review of a PR. When a diff shows a minified file has changed and you need to see the actual logic change.

Source maps: the full source recovery path

A source map is a JSON file (usually .js.map) that the minifier produces alongside the minified code. It contains a mapping from each position in the minified output back to the original source file, line and column. When a source map is available, you can recover not just the formatting but the actual original variable names, comments and file structure.

To use a source map:

1. Locate the .map file, either alongside the minified file on the server or in your build output directory.
2. Use a tool like source-map (Mozilla), sourcemapper or webcrack to apply the map and reconstruct the original source.
3. For stack-trace symbolication specifically, error monitoring services like Sentry, Bugsnag, Rollbar and Datadog accept uploaded source maps and automatically de-minify production stack traces.

Source maps are usually disabled in production (or restricted to the error monitoring service) because they expose the original source code to anyone who can download them. If you find a .map file publicly accessible on a site, the site's original source is effectively exposed.

Common unminifier limitations

• Variable names are not recovered. function n(e,t){return e+t} cannot be turned back into function add(a,b){return a+b} without a source map.
• Comments are permanently lost. The minifier deletes them before output; there is nothing to recover.
• String concatenation changes are not reversed. A minifier may merge adjacent string literals; the beautifier cannot split them again.
• Obfuscated code stays obfuscated. Tools like JavaScript Obfuscator deliberately mangle control flow and string tables. A beautifier restores indentation but the logic remains hard to read. For deobfuscation you need a dedicated tool like webcrack.
• HTML minification loses optional tags. Some HTML minifiers remove optional </p> and </li> closing tags; the beautifier cannot reliably restore them.

Frequently asked questions