Runs in your browser. Your files and text never leave your device - nothing is uploaded.
Beautify HTML, CSS, and JavaScript Online
The Tools Kit's free Code Beautifier turns minified, compressed, or badly indented code back into something you can read. Choose HTML, CSS, or JavaScript, paste your code, and click Beautify Code: every block is put on its own lines and indented with two spaces per level. It works as an HTML beautifier, a CSS beautifier, and a JavaScript (JS) beautifier in one place, so you can unminify a stylesheet or pretty-print a script without installing anything.
Formatting is done by the open-source js-beautify library, which is loaded into your browser on demand. Your code is processed on your own device and is never uploaded, which makes it safe for unreleased or proprietary source.
How to Use the Code Beautifier
- 1
Choose a language
Click HTML, CSS, or JavaScript. CSS is selected when the page loads.
- 2
Paste your code
Paste the minified, compressed, or messy code into the Minified / Unformatted Code panel on the left.
- 3
Click Beautify Code
The code is re-indented with two spaces per level and appears in the Formatted Code panel on the right.
- 4
Copy the result
Click Copy Formatted to put the beautified code on your clipboard, ready to paste into your editor.
Formatting runs only when you click the button, so after editing the input or switching language, click Beautify Code again to refresh the output.
Before and After: What Beautifying Does
These are real outputs from the tool. A one-line CSS rule is expanded so each declaration sits on its own indented line:
.a{color:red;font-size:12px}.a {
color: red;
font-size: 12px
}In JavaScript mode, spaces are added after commas and around operators, and each nested block gets one more level of indentation:
function f(a,b){if(a){return b}else{return a+b}}function f(a, b) {
if (a) {
return b
} else {
return a + b
}
}In HTML mode, block elements such as lists are broken onto separate lines while inline tags like <b> stay inside their paragraph. Inline <style> and <script> blocks are formatted as CSS and JavaScript too:
<div><p>Hi <b>there</b></p><ul><li>a</li><li>b</li></ul></div><div>
<p>Hi <b>there</b></p>
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>Notice what does not change: the beautifier does not add the missing semicolons in either example. It rewrites layout, not code.
Beautify vs. Minify: When to Use Each
Minifying and beautifying are two directions of the same job. Minification removes whitespace and comments so files download faster in production; beautifying adds structure back so a person can read, debug, or review the code. A typical workflow is to keep readable source in your project, then shrink it for deployment with the CSS minifier or the JavaScript minifier. When you only have the compressed file, for example a stylesheet copied from a live site, run it through this code beautifier first.
Beautified output is not identical to the original source. Comments that were stripped during minification are gone for good, and variable names shortened by a JavaScript minifier stay short; beautifying restores readability of the layout, not the original names.
What This Formatter Does Not Do
A beautifier is not a validator. js-beautify does not reject broken code: an unclosed brace or a missing tag is still re-indented, so neat output does not prove the code is correct. Test the result in your browser or run it through a linter if correctness matters.
The indent size is fixed at two spaces and there are no settings for tabs, brace style, or line wrapping. The tool also covers only HTML, CSS, and JavaScript. For other formats, use a dedicated tool: the JSON formatter validates as well as indents, the SQL formatter lays out queries, and the XML formatter handles XML documents and feeds. You can find the full set in the developer tools collection.
Common uses
- Reading minified CSS or JavaScript copied from a production website
- Tidying HTML exported from a page builder or generated by a Markdown to HTML converter before editing it by hand
- Reformatting code pasted from chat, email, or a ticket before a code review
- Making snippets readable for documentation, blog posts, or teaching; if you need to show HTML tags as text on a page, escape them with the HTML entity encoder
- Debugging a one-line script by spreading it over lines so errors are easier to locate
Code formatting terms explained
| Term | What it means here |
|---|---|
| Beautify / pretty-print | Re-layout code with line breaks and consistent indentation so people can read it; the code itself does the same thing |
| Minify | The opposite: strip whitespace, comments and line breaks to make files smaller for production |
| Indent size | How many spaces each nesting level is pushed in; this tool always uses 2 |
| Unminify | Another name for beautifying minified code back into a readable layout |
| Linter | A tool that checks code for errors and style problems; a beautifier only changes layout and does not check correctness |
| Formatter | A general term for any tool that rewrites code layout, such as this beautifier or a SQL or JSON formatter |
Frequently Asked Questions
A code beautifier, also called a code formatter or pretty-printer, takes compressed or badly indented source code and rewrites its layout with line breaks and consistent indentation. The code still does the same thing; only the whitespace changes, so it becomes much easier to read and edit.
HTML, CSS, and JavaScript. Pick the matching language button before you click Beautify Code. HTML mode also formats the CSS and JavaScript inside inline style and script tags.
Select CSS or JavaScript, paste the minified code into the left panel, and click Beautify Code. For example, .a{color:red;font-size:12px} becomes a four-line rule with each declaration on its own line, indented by two spaces.
For CSS and JavaScript, no: the beautifier only changes whitespace, line breaks and indentation, not your selectors, values or logic. In HTML, extra whitespace between inline elements can occasionally change spacing on the rendered page, so check the result if exact inline spacing matters.
No. The js-beautify library is loaded into your browser when you click Beautify Code and formats the code there. Nothing you paste is sent to The Tools Kit or stored.
No. The tool always uses a 2-space indent for all three languages, and there is no option in the interface to change the indent size or switch to tabs.
No. It is a formatter, not a validator or linter. It does not add missing semicolons or closing brackets, and malformed code is still re-indented rather than rejected, so the output can look tidy even when the code is broken.
Selecting JavaScript will re-indent JSON, because JSON is valid JavaScript syntax. However, it will not tell you whether the JSON is valid, so use a dedicated JSON formatter when you also need validation.
No. Formatting runs when you click Beautify Code. If you edit the input or switch language, click the button again to refresh the formatted output.
Yes. It is free to use with no signup and no limit on how many times you format code.
Reviewed by Raja Jahangir · Last reviewed: October 7, 2026
How do you beautify minified HTML, CSS, or JavaScript?
To beautify code, pick HTML, CSS, or JavaScript, paste the minified source, and click Beautify. The code is re-indented with two spaces, one declaration or statement per line, so .a{color:red;font-size:12px} becomes a readable four-line rule. Formatting uses the js-beautify library in the browser, so the code is never uploaded.