HTML, CSS & JavaScript Formatter
Paste code or open a file. Beautify turns one-line or messy HTML, CSS and JavaScript into clean, indented code (it also unminifies .min.js and .min.css files). Minify does the opposite for production and shows how many bytes you save. Everything runs in your browser.
What the beautifier does
Before
<nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/blog" class="active">Blog</a></li></ul></nav><style>.menu a{color:#333;text-decoration:none}.menu a.active,.menu a:hover{color:#06c}</style>
After
<nav class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog" class="active">Blog</a></li>
</ul>
</nav>
<style>
.menu a {
color: #333;
text-decoration: none
}
.menu a.active,
.menu a:hover {
color: #06c
}
</style>
- HTML: every block element (
<div>,<ul>,<li>,<p>...) starts a new line, and its children are indented one step. Inline elements such as<a>,<b>and<span>stay in the line of text, so no space is added where there was none. - CSS inside
<style>and JavaScript inside<script>are formatted as well.<pre>and<textarea>are never touched. - CSS: one declaration per line, a space after each colon, each selector of a list on its own line, and an empty line between rules (both can be turned off).
- JavaScript: one statement per line, consistent spaces around operators and after keywords, and braces on the same line or the next line. Your own empty lines are kept (up to the number you choose).
- Minified files (
.min.js,.min.css) come back as readable code. Only the layout changes: shortened names stay short.
Beautify or minify: when to use which
| You want to | Use | Why |
|---|---|---|
| Read or debug code from a website, an email or a CMS | Beautify | Indentation shows which element or block belongs where, so missing closing tags and braces are easy to see. |
Understand a .min.js library | Beautify (JavaScript) | Each statement gets its own line. For the original names, look for a source map (.map) in the browser's developer tools. |
| Make a page load faster | Minify | Fewer bytes to download and parse. It works together with gzip or Brotli on the server. |
| Paste CSS or JS into a single-line field (a CMS, an e-mail template, a bookmarklet) | Minify | Everything fits on one line and comments are gone. |
| Keep a whole project in one style | A formatter in your editor or CI | Prettier or js-beautify run on every save or commit; see the table below. |
What minify removes, and what it always keeps
- HTML: comments (not
<!--[if IE]>conditional comments), line breaks and indentation, extra spaces inside tags. Text in<pre>and<textarea>and every attribute value stay exactly as they are. Inline<style>,<script>and JSON-LD are minified too (turn this off with the checkbox). - CSS: comments, white space, and the last
;in each block. Strings,url(...)values and the space in selectors such asdiv :hover(which means something different fromdiv:hover) are kept./*! ... */license comments are kept unless you turn that off. - JavaScript (with Terser): comments, white space, unused code; local names become one or two letters; constant expressions are calculated in advance. Global names and object properties keep their names, so other scripts still work.
Format code in your editor and on the command line
| Tool | How |
|---|---|
| VS Code | Shift+Alt+F (Format Document); Ctrl+K Ctrl+F formats only the selection |
| JetBrains IDEs (WebStorm, IntelliJ, PhpStorm) | Ctrl+Alt+L (Reformat Code) |
| Chrome DevTools | Sources tab, open a minified file, click the { } (Pretty print) button |
| Prettier | npx prettier --write "src/**/*.{html,css,js}" |
| js-beautify (the library this page uses) | npx js-beautify file.js, npx html-beautify index.html, npx css-beautify style.css |
| Terser (JavaScript minifier) | npx terser app.js -c -m -o app.min.js |
| Lightning CSS (CSS minifier) | npx lightningcss --minify style.css -o style.min.css |
| html-minifier-terser | npx html-minifier-terser --collapse-whitespace --remove-comments --minify-css true --minify-js true index.html |
| esbuild / Vite | npx esbuild app.js --minify --outfile=app.min.js; vite build minifies JS and CSS on its own |
A build tool that minifies on every release is the right choice for a real project. This page is for the quick cases: one file, one snippet, or a minified script you need to read right now.
Frequently asked questions
How do I beautify HTML?
Choose HTML and Beautify, then paste the code or open a .html file. The result appears at once: every block element on its own line, children indented one step, and the CSS and JavaScript inside <style> and <script> formatted too. Choose 2 spaces, 4 spaces or tabs, and whether long tags should keep their attributes on one line or put each attribute on its own line. Then copy or download the result.
Can I unminify JavaScript or CSS?
Yes, for the layout: paste the .min.js or .min.css file and choose Beautify. Every statement and every CSS rule gets its own line again, with indentation, so you can read and debug it. What a minifier removed for good cannot come back: comments are gone, and local variable names that were shortened to a, b, c stay short. If the site publishes a source map (a .map file), your browser's developer tools can show the original source.
Does minifying HTML change how my page looks?
Not with the default "Safe" white space setting. A browser shows several spaces and line breaks in normal text as one space, so the minifier turns every run of white space into one space and only removes it where a browser never shows it: at the edges of block elements such as <div> and <p>, inside <head>, and between table tags. <pre> and <textarea> are kept exactly. The "Remove between blocks" setting saves a little more but can close the gap between inline-block elements. If your CSS uses white-space: pre on other elements, choose "Keep".
Why do the variable names change when I minify JavaScript?
"Shorten variable names" renames local variables and function parameters to one or two letters, which is where most of the savings come from. It is safe because only names that cannot be seen from outside the function are renamed. Global names, object properties and anything used by other scripts keep their names. Code with import or export is minified as an ES module, where top-level names are private too and are shortened as well. Turn the option off if you need readable names.
How much smaller does minified code get?
Typical results are 10 to 25 percent for HTML, 15 to 35 percent for CSS and 40 to 70 percent for JavaScript, depending on how many comments, spaces and long names the code has. The tool shows the exact size before and after. Minifying works together with gzip or Brotli compression on the server, not instead of it: a minified file is also smaller after compression.
What is the difference between this and Prettier?
Prettier is an opinionated formatter for projects: it rewrites code into one fixed style and is best run in your editor or in CI, so every file in a repository looks the same. This page uses js-beautify, which keeps more of your own layout (for example short one-line blocks and your empty lines) and is meant for quick jobs: reading a minified file, cleaning up code from an email or a CMS, or minifying a snippet. Both only change white space and layout, never what the code does.
Is my code uploaded?
No. Everything runs with JavaScript in your browser, using the open-source js-beautify (MIT license) and Terser (BSD license) libraries, and nothing is sent to a server. Only your settings, such as the language and the indent, are kept in this browser for your next visit.