Beautify minified JavaScript, CSS and HTML back into readable, indented code
| Option | Default | What it controls |
|---|---|---|
indent_size | 4 | Spaces per indent level (this page defaults to 2, the modern convention) |
indent_char | space | Character used for indentation — space or tab |
preserve_newlines | true | Keep line breaks that already exist in the input |
max_preserve_newlines | unlimited | Cap on consecutive blank lines kept in one chunk |
brace_style | "collapse" | Brace placement: collapse (K&R), expand (Allman), end-expand, none |
space_after_anon_function | false | function () vs function() in anonymous functions |
space_before_conditional | true | if (x) vs if(x) |
wrap_line_length | unlimited | Wrap lines at the next opportunity after N characters |
end_with_newline | false | Add a trailing newline to the output |
unescape_strings | false | Decode \xNN escapes into readable characters |
Defaults are documented in the js-beautify 1.15.4 source that this page runs. The tool exposes the five options that matter day to day; the rest are engine defaults.
| Mode | Input | Output | Growth |
|---|---|---|---|
| JavaScript | 1 line, 110 chars | 10 lines, 149 chars | +35% |
| CSS | 1 line, 135 chars | 17 lines, 182 chars | +35% |
| HTML | 1 line, 130 chars | 18 lines, 177 chars | +36% |
Real minified bundles grow far more — the minifier of a 500 KB library squeezed out every space, so beautified output typically lands 20–40% larger by characters and many hundreds of lines longer.
Minifiers and bundlers make code small; this tool makes it readable again. It runs js-beautify 1.15.4 (MIT license, the library that powers formatter plugins across many editors), loaded from jsDelivr and executed entirely in your browser. Three modes share one page: a JavaScript beautifier, a CSS beautifier, and an HTML beautifier that also reformats the script and style blocks it finds inside your markup.
Beautifying restores whitespace only. It can't bring back the variable names a minifier shortened or the comments it deleted, so treat it as a reading aid for third-party code, not a round trip. For your own code, a formatter in your editor (Prettier, or js-beautify via a plugin) works from the original source, so nothing is lost. This page fills the gap when all you have is the minified artifact: a production bundle you're debugging, a copied snippet, a theme file shipped compressed.
Pick the tab matching your code, paste, and hit Beautify — output appears in the right pane and updates as you type. Choose 2 or 4 spaces (or tabs) for indentation, a brace style for JavaScript, and an optional wrap length that breaks long lines at the next sensible point. Copy grabs the formatted result; Load sample drops in a known minified snippet so you can see the effect before pasting your own.
Feed it the one-line JavaScript function add(a,b){return a+b}const calc={add:function(x,y){return x+y;},mul:(a,b)=>a*b};console.log(add(2,3)); — 110 characters, no whitespace. Out comes 10 lines and 149 characters: the function body drops to its own line, the object literal breaks one property per line, and each gains a two-space indent. The logic is untouched; only the layout changed. The CSS and HTML samples behave the same way — a 135-character stylesheet becomes 17 lines with each declaration on its own row, and a squashed HTML document gets its head, body, and nested lists indented back into shape.
It reformats source code for humans without changing what it does. Minified files strip out every space and newline the compiler doesn't need; a beautifier puts them back — one statement per line, consistent indentation, braces on predictable lines. The code is byte-for-byte different but semantically identical, which is why you can beautify a library file to read it, then keep using the minified original.
Almost, but not exactly. Minification also renames variables, drops comments, and removes dead code — none of which can be recovered from the output. A beautifier restores whitespace and line structure only. Variable names like a, b, and t stay short, and comments stay gone. For code you own, run a formatter in your editor instead so names and comments survive.
Your code never leaves the browser. The formatting engine, js-beautify, is loaded from a CDN and executed locally — there is no server-side call with your input. The output is deterministic: the same input and options always produce the same output, so it's safe for proprietary code.
That's the preserve-newlines behavior and the brace style at work. By default js-beautify keeps blank lines you already have (up to the max you set) and collapses braces onto the statement line, which is the common K&R layout. Switch brace style to expand for Allman braces on their own lines, or set a wrap line length to break long chained calls.
Collapse is the default and matches most style guides: if (x) { on one line. Expand puts every brace on its own line (Allman style), end-expand only moves closing braces, and none leaves braces where they found them. If your team has a lint rule, match it here; otherwise collapse with 2-space indent is the most common modern choice.
Yes. The HTML mode of js-beautify recognizes style and script tags and reformats their contents with the matching engine. Just paste the whole document and let it sort out which parts are markup, which are styles, and which are scripts.