HTML Beautifier

What this tool does

It takes minified, generated or hastily written HTML and hands it back with a readable structure: every element at its indentation level, tidy attributes and separated blocks. It supports HTML and Vue templates, and also formats any embedded CSS and JavaScript.

It is the inverse of the HTML minifier.

It formats what is inside, not just the tags

That is the difference from simple formatters. The contents of a <style> tag are formatted with the CSS parser, and those of a <script> with the JavaScript one. They are not left as glued-together blocks of text.

That is why this tool downloads a little more than the other two in the catalogue: it needs all three parsers at once.

Whitespace in HTML is visible

This is the important warning, and almost nobody gives it.

In HTML, whitespace between inline elements is not decorative — it renders. If you have

<a href="/a">One</a><a href="/b">Two</a>

and split it across two lines, the browser draws a space between the two links that was not there before. The same goes for span, button or img placed in a row.

Prettier knows about this and protects those cases, but if your layout depends on having no space at all between tags, compare before replacing the file. It is the only scenario where formatting can change what is displayed.

With block elements — div, p, section, li — there is no risk: whitespace between them collapses and has no effect.

Vue yes, Blade and Twig no

Vue works: pick that dialect and it will understand a single-file component’s structure, with its template, script and style blocks, formatting each appropriately.

Blade, Twig, Handlebars and the like are not supported. Their control tags (@if, {% for %}, {{#each}}) interleave with the HTML in a way the parser does not accept, and the file is rejected as a syntax error. For those templates, use your editor’s formatter, which does know the engine’s syntax.

When you need it

• Reading a production page’s HTML when the server serves it minified on a single line.
• Tidying a generator’s output or that of a visual builder, which usually arrives with erratic indentation.
• Reviewing an email template, where nested-table HTML is especially hard to follow unformatted.
• Preparing a snippet for documentation, so it reads well in the example.

About the formatter

It uses Prettier (MIT licence) compiled for the browser. You can adjust indentation — two spaces, four, or tabs — and the maximum line width, which in HTML decides when an element with many attributes spreads them across lines.