HTML Formatter
Pretty-print HTML with 2-space indentation using the same formatter as Prettier. Browser-only.
0 characters
0 characters
About HTML Formatter
The HTML formatter uses Prettier — the same opinionated formatter used by millions of JavaScript and TypeScript projects — to reflow HTML with consistent indentation, attribute wrapping, and tag handling. It understands HTML5, embedded scripts and styles, Vue/Angular templates, and other dialects Prettier supports out of the box.
When to use it
- Cleaning up minified HTML before reading it
- Standardizing the indentation of an existing HTML file
- Normalizing HTML across a project so diffs stay small
- Producing readable HTML output from a template engine
How it works
Prettier's HTML parser builds an AST that captures elements, attributes, and the boundaries of inline scripts and styles. The formatter then re-prints with 2-space indentation, breaking long attribute lists onto separate lines and preserving the meaningful whitespace inside elements where applicable (such as <pre>).
Examples
Single-line HTML → indented
<html><head><title>Hi</title></head><body><div id="root"><p>hello</p></div></body></html>
<html>
<head>
<title>Hi</title>
</head>
<body>
<div id="root">
<p>hello</p>
</div>
</body>
</html>
Frequently asked questions
- Is the output rendered identically to the input?
- Yes for almost all HTML. Prettier preserves inline whitespace in tags like <pre>, <textarea>, and <script>. Some edge cases (significant whitespace between inline tags) may visually shift slightly — this matches Prettier's default behavior.
- Does it support templating languages?
- Standard HTML works perfectly. Vue templates also work. Other templating syntaxes (Handlebars, Jinja, ERB) may produce odd results — they aren't part of Prettier's HTML parser.
- Can I configure indentation width?
- The output uses 2-space indentation, which matches Prettier's default. To customize, integrate Prettier directly into your build with a .prettierrc file.
- Is my HTML uploaded anywhere?
- No. Prettier runs in your browser via its standalone build. The page lazy-loads about 2 MB of Prettier code on first use; subsequent uses are instant.