What is a code beautifier?
A code beautifier takes compressed or badly indented code and adds line breaks and consistent indentation so the structure is readable again. It's the opposite of a minifier. This one handles HTML, CSS and JavaScript, indenting by two spaces per nesting level based on tags and braces. It's a lightweight helper for reading code, not a full formatter like Prettier.
How to beautify code
- Paste your code into the input box.
- Leave Language on Auto-detect, or choose HTML, CSS or JavaScript.
- Click Format, then copy the result.
What each mode does
| Mode | Splits lines at | Indents by | Leaves alone |
|---|---|---|---|
| HTML | Every >< boundary between tags |
Open tags, ignoring void elements like <img>, <br>, <input> |
Text and inline tags on the same line as their parent |
| CSS | {, ; and } |
One level inside each rule | Spacing inside declarations (padding:16px stays as is) |
| JavaScript | {, } and ; |
One level per open brace | Everything between those characters |
None of the modes reorder, rename or remove code, and none of them check syntax. Code with errors is indented just as happily as valid code.
Worked examples
HTML. This one-line card:
<div class="card"><h2>Title</h2><p>Some <b>bold</b> text</p><img src="a.png" alt=""><br></div>
becomes:
<div class="card">
<h2>Title</h2>
<p>Some <b>bold</b> text</p>
<img src="a.png" alt="">
<br>
</div>
The <p> keeps its inline <b> on the same line because there's text between the tags, so there's no >< to split on. <img> and <br> don't increase the indent because they're void elements that never have a closing tag.
JavaScript. This minified function:
function greet(name){if(!name){return "Hi";}return "Hello, "+name;}
becomes:
function greet(name) {
if(!name) {
return "Hi";
}
return "Hello, "+name;
}
Notice that spacing inside each line is untouched: if(!name) and "Hello, "+name are exactly as they were.
Limits worth knowing
All of these were checked by running them through the tool.
- JavaScript strings aren't protected.
const s = "a;b{c}";is split at the;and the braces, producing a broken string literal. The same goes for regular expressions and template literals containing those characters. - Object literals and arrow functions get a stray line.
const o = {a: 1};puts{a: 1}on its own indented lines and leaves the closing;alone on the next line. The result still runs. forloops split at their semicolons, as described in the FAQ.- Nested CSS isn't indented. In
@media (max-width:600px){.a{color:red}}the inner rule and its declarations end up at the same level, and the closing braces don't line up. - HTML whitespace inside
<pre>and<textarea>is trimmed at the start of each line. <script>and<style>contents inside an HTML document aren't beautified. Paste them separately and pick JavaScript or CSS.
For a production codebase, a real formatter wired into your editor is the better choice. This tool is for the moment you've got a minified file open and just need to see its shape.
Beautify, then compare
Because the HTML and CSS modes only add whitespace, a common trick is to beautify both the old and new versions of a minified file and paste them into the code diff tool. Comparing two one-line files shows a single changed line; comparing beautified versions shows exactly which rule or tag changed.
Related tools
- HTML minifier and CSS minifier: the reverse operation.
- JSON formatter: parses and validates JSON while indenting it.
- JavaScript editor: edit code with syntax highlighting.
Last updated