How to Beautify CSS, HTML and XML (Online, VS Code, Prettier)

To beautify CSS, HTML or XML, paste it into a formatter that adds line breaks and indents each level of nesting. Use the free CSS beautifier, HTML formatter or XML formatter in your browser, or press Shift+Alt+F in VS Code on Windows. Beautifying only changes layout: it makes one-line, minified code readable so you can find a rule, spot a missing tag or compare two versions.

This guide shows what each formatter does to real input, where it can change your code in ways that matter, and how to get cleaner results with VS Code and Prettier when you are working on a project rather than reading a snippet.

What beautifying changes, and what it doesn't

A beautifier (also called a formatter or pretty-printer) works on whitespace. It puts each rule, declaration or tag on its own line and indents it by depth, usually two or four spaces per level. Some formatters also tidy small things, such as adding a space after each colon in CSS.

It does not fix errors, reorder rules, rename anything or bring back what minification deleted. Comments stripped by a minifier are gone for good, and minified JavaScript keeps its short names like a and e. If a stylesheet has a missing brace, the beautified version still has the missing brace; it is just easier to see.

Whether the extra whitespace is harmless depends on the language:

So treat the output of any online formatter as a reading copy. Keep your original file for anything that a browser, app or server will process.

Beautify CSS

Paste a minified stylesheet into the CSS beautifier and click Beautify CSS. We gave it this one-line button style:

.btn{display:inline-block;padding:8px 16px;border-radius:6px;background:#6d48f5;color:#fff}.btn:hover{background:#5b3ae0}@media (max-width:600px){.btn{display:block;width:100%}}

The result had one declaration per line, two spaces of indentation per level, and the rules inside the media query indented one level deeper:

@media (max-width:600px) {
  .btn {
    display:block;
    width:100%
  }
}

Notice what it leaves alone: display:block keeps no space after the colon, and the last declaration in each block still has no semicolon. The tool only splits lines; it doesn't normalise. Prettier, by comparison, writes display: block; with the space and the closing semicolon.

The beautifier has no settings. Indentation is always two spaces. It also splits at every semicolon, including ones that are not the end of a declaration. In our tests, url(data:image/png;base64,…) and content:";" both came out split across two lines, which breaks them. Comments stay where they were, joined to the next selector rather than on their own line. If your file has inline images or quoted semicolons, format it in your editor instead (see below).

Format HTML

The HTML formatter puts every tag and every piece of text on its own line, indented two spaces per level. It knows the void elements (<img>, <br>, <input>, <meta> and the rest), so they don't push the indentation further right.

That one-item-per-line rule makes structure obvious, but it splits inline text too. Our test line <p>Hello <strong>world</strong>.</p> came out as seven lines, with world and the full stop on separate lines. If you published that, a browser would show "Hello world ." with a space before the full stop, because the line break between the closing tag and the . counts as a space. The same happens inside <pre>, where the added indentation becomes visible. Prettier keeps <p>Hello <strong>world</strong>.</p> on one line because it knows which elements are inline.

Two more things to know when reading the output:

• Indentation that drifts right usually means an unclosed tag: with <div><p>Unclosed<div>next</div></div>, the final </div> ends up indented instead of at the left edge. But it can also be HTML's optional end tags. <li>One<li>Two</ul> is valid HTML, yet the formatter indents each <li> deeper because it expects a </li>.
• Inline scripts containing <, such as if (a < b), confuse the tag splitter. The script survives, but every line after it is indented one level too far.

Pretty-print XML

The XML formatter uses the same engine without the HTML void-element list, so only tags ending in /> count as self-closing. It handles the <?xml ?> declaration, comments and CDATA sections. A one-line sitemap became this:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>
      https://example.com/
    </loc>
    <lastmod>
      2026-10-01
    </lastmod>
  </url>
</urlset>

Look at <loc>: the URL now sits on its own line, surrounded by spaces and line breaks that are part of the element's text. Many programs trim that, but not all, and in XML that whitespace is data. Read the formatted copy; upload the original.

The formatter also doesn't validate. Feed it <url> without its closing tag and it indents happily. To check whether XML is well-formed, open the file in Chrome or Edge. For our broken sitemap Chrome printed "This page contains the following errors: error on line 1 at column 97: Opening and ending tag mismatch: url line 1 and urlset".

Beautify in VS Code

If the code lives in a project, format it in the editor, where the result is saved straight back to the file.

• Format Document: Shift+Alt+F on Windows, Shift+Option+F on macOS, Ctrl+Shift+I on Linux. You can also right-click and choose Format Document.
• Format Selection: select some lines and press Ctrl+K then Ctrl+F (Cmd+K Cmd+F on a Mac).
• Format on save: turn on editor.formatOnSave in Settings. It is off by default, as are format on type and format on paste.

VS Code has built-in formatters for JavaScript, TypeScript, JSON, HTML and CSS. XML isn't on that list, so Format Document does nothing useful in an .xml file until you install an XML extension, such as Red Hat's XML extension from the Marketplace. To change the indent width, click "Spaces: 4" in the status bar.

Beautify with Prettier

Prettier is a free, open-source formatter that teams use so everyone's code looks the same. It supports CSS, Less, SCSS, HTML, JavaScript, TypeScript, JSON, Markdown, YAML and a few more out of the box. With Node.js installed, this formats every CSS and HTML file under src in place:

npx prettier --write "src/**/*.{css,html}"

XML needs the official plugin. We got clean, one-element-per-line output only with the whitespace option set to ignore:

npx prettier --plugin=@prettier/plugin-xml --xml-whitespace-sensitivity ignore --write feed.xml

Prettier parses the code properly, so it refuses broken input instead of guessing. On our mismatched sitemap it stopped with a syntax error. That makes it slower to set up than a paste box, but safer for files you are going to ship. In VS Code, install the Prettier extension and pick it as the default formatter, and Shift+Alt+F will use it.

Beautify or minify?

They are opposites, and most projects need both: readable code while you work, compact code for visitors.

Our guide on how to minify CSS, JavaScript and HTML measures how much minifying saves and where it can break code. The site's CSS minifier and HTML minifier reverse what the beautifiers do. For JSON, use the JSON formatter, which parses the data and reports errors; how to format JSON explains the error messages.

Frequently asked questions

Does beautifying change how my website looks?

Beautified CSS behaves the same, unless the formatter split a string or data URI. Beautified HTML can change slightly, because line breaks between inline elements show as spaces and indentation inside <pre> becomes visible. Use online formatter output for reading, and format real files with VS Code or Prettier.

Can I beautify minified JavaScript?

The site has no JavaScript beautifier, but VS Code's Format Document and Prettier both handle JavaScript, and Chrome DevTools has a "pretty print" button in the Sources panel. You get readable layout, not the original variable names or comments. Only a source map, if the site publishes one, links minified code back to the original.

Is my code uploaded when I use the online formatters?

No. The CSS beautifier, HTML formatter and XML formatter run in your browser's JavaScript; the text you paste is not sent to the server.

Can I choose four spaces or tabs?

Not in the online tools: they always indent two spaces. In VS Code, click the indentation setting in the status bar. Prettier takes --tab-width 4 or --use-tabs.

Why does my beautified code still look wrong?

A formatter shows structure; it doesn't repair it. A selector swallowed into the previous rule usually means a missing }. Indentation that never returns to the left edge usually means an unclosed tag. Fix the source and format again.

Is "beautify" the same as "format" or "pretty print"?

Yes. All three mean adding line breaks and indentation for people to read. "Lint" or "validate" is different: those check the code for errors.

Sources: VS Code documentation, Basic editing (formatting shortcuts and settings); Prettier documentation (supported languages); outputs from the site's formatters, Prettier 3.9 and Chrome 151, tested October 2026.