How CSS beautification works
The beautifier reads your stylesheet character by character, tracks how deeply nested each block is, and re-emits it with consistent spacing. It never changes what the styles do — only how they look in the file.
- Tokenize. The library scans your input into a stream of tokens: selectors, property names, values, at-rules, comments, and the braces, colons, and semicolons that separate them. Strings and url() values are recognized as single units, so a brace inside a content property never gets mistaken for a block delimiter.
- Track nesting. As it walks the token stream, the beautifier keeps a running indent level. Any opening brace pushes the level deeper, whether it belongs to a rule block, a media query, or a keyframes block, and every closing brace pops it back. That depth decides how many indent units sit in front of each line you get back.
- Apply your options. Your indent choice (2 spaces, 4 spaces, or a tab) sets the width of one level. The brace-style setting decides whether an opening brace hugs the selector that precedes it or drops to its own line. The remaining toggles add a blank line between rule blocks and split grouped selectors onto separate lines.
- Re-emit. Finally the formatter prints the tokens back out with the indentation and line breaks it has worked out, putting one declaration per line and a single space after each colon. The result is the same stylesheet, laid out so a human can scan the cascade.
Why beautify CSS
- Read minified stylesheets. Production CSS ships on one line with no spacing between rules. Beautifying restores the line breaks and indentation so you can find the selector behind a layout bug and see exactly which declarations it sets, even without a source map.
- Tidy inconsistent files. A stylesheet several people have touched drifts into mixed indentation and brace styles. One pass through the beautifier normalizes the whole file to a single layout, so the next diff shows real cascade changes rather than whitespace noise.
- This tool doesn't tax your page. Most online formatters load their whole library the moment you open the page. This one lazy-loads js-beautify only when you click Beautify or switch Live mode on, so opening the page costs a few kilobytes instead of a few hundred, and the first render stays quick.
- Nothing leaves your browser. The beautifier runs entirely on your device. Your CSS is never uploaded to a server, which matters when the stylesheet you're inspecting belongs to a client, ships internal class names, or falls under a confidentiality agreement.
Common applications
Beautifying CSS comes up whenever someone needs to read a stylesheet that wasn't written to be read.
- Debugging production: paste a minified stylesheet pulled from the Network tab to find the rule that's overriding the layout you expected.
- Code review prep: reformat a contributor's inconsistently-indented stylesheet before opening the pull request so reviewers see cascade changes, not layout churn.
- Learning and auditing: expand a framework or component-library stylesheet to study how its selectors, media queries, and custom properties are structured.
A worked example
Take a minified one-liner: a{color:red;margin:0}b{padding:0}. Paste it above with indentation set to 2 spaces and brace style Collapse, then click Beautify. You get back readable blocks: a { on its own line, the color: red; and margin: 0; declarations each indented one level deeper, the closing brace lined up under the selector, and the b rule following below. Switch the brace style to Expand and each opening brace drops onto its own line instead. Change indentation to Tabs and every level shifts from two spaces to a tab character. The styles are identical; only the layout changes.
FAQ
Does this run in my browser?
Yes. The js-beautify library is lazy-loaded the first time you click Beautify or enable Live mode, then cached. Your CSS never leaves the page — there is no server round-trip and no upload.
Is beautifying the same as un-minifying?
It restores readable formatting — indentation, line breaks, and spacing — but it cannot bring back comments that minification stripped or recover any structure that was never in the file. It only reformats the declarations and selectors that are present.
Will beautifying change how my styles render?
No. Beautification only adds and removes whitespace and line breaks; the cascade is untouched and the page renders identically. Property order, specificity, and values all stay exactly as you wrote them.
What do the brace-style options mean?
Collapse keeps an opening brace on the same line as the selector (a {), which is the common CSS convention. Expand drops every opening brace onto its own line beneath the selector. The blank-line and one-selector-per-line toggles control the spacing between rules and how grouped selectors like h1, h2, h3 are laid out.
Browser-side CSS beautification gives you a readable stylesheet without a build step or an upload. Paste a minified or messy file, pick your indentation and brace style, then copy or download the result. Nothing leaves your device, there's no account, and the library only loads when you ask it to — so opening this page costs you a few kilobytes, not a megabyte.