Code Beautifier: HTML, CSS & JS
Add practical indentation and line breaks to minified front-end code. Your work stays on this device whenever possible.
How to use Code Beautifier: HTML, CSS & JS
- Paste compressed code into the input box and choose 'Code language': HTML, CSS or 'JavaScript / JSON', or leave auto-detect.
- Select 'Indentation' as 2 spaces, 4 spaces or Tabs.
- Press 'Beautify code' and review the indented result.
- Copy it, or press 'Download Beautified File' for a formatted file with the matching extension.
- Ignore 'Preserve single blank lines' for now; it does not currently change the output.
Worked example
With 'CSS' and '2 spaces', paste .btn{color:#fff;padding:4px 8px}.btn:hover{color:red}. The tool returns .btn, then { on its own line, then color:#fff; and padding:4px 8px indented by two, then }, and repeats the pattern for .btn:hover with color:red. The result runs to 9 lines.
When to use this tool
- Reading a minified stylesheet copied from a production page.
- Getting a one-line HTML fragment into a shape you can scan tag by tag.
Important limitations
Applies standard structural indentation rules for front-end languages. It does not transpile modern ECMAScript features or resolve runtime dependencies.
Frequently asked questions
What style does the CSS output use?
Each selector sits on its own line with the opening brace on the next line, and each declaration is indented on its own line. No space is added after colons, so color:red stays as typed.
Does 'Preserve single blank lines' work?
The checkbox is shown, but all whitespace is collapsed before formatting begins, so blank lines from your source are not kept. Add any visual spacing manually after copying the output.
Can I use it for JSON?
It puts braces and brackets on their own lines but leaves commas inline, so key-value pairs stay bunched. The JSON Formatter page is better suited for that.
What are the JavaScript risks?
Whitespace is squashed first, so a // comment can swallow the code after it on the same line. Semicolons also start new lines, including those in a for(;;) header.
How does HTML get indented?
Every tag, inline ones such as a and b included, goes on its own line. That can alter spacing in inline text, and pre or textarea contents are not protected.