HTML Formatter
Beautify compressed HTML into readable markup.
Input HTML
246 bytes · 1 lines
Formatted HTML
0 bytes
What is an HTML Formatter?
An HTML formatter (also called an HTML beautifier) takes compressed or messy HTML and returns it with consistent indentation, one element per line where appropriate, and predictable spacing. It's the inverse of minification: minification prepares HTML for shipping; formatting prepares it for reading. Both have their place — you ship minified, you debug formatted.
The common use cases are inspecting a production page ("View Source" shows minified garbage; paste here to make sense of it), reviewing a newly-arrived template from a third-party system, cleaning up CMS-generated markup before committing to source control, and preparing HTML snippets for a documentation page or email template where the reader will actually look at the source.
Our formatter uses js-beautify, the library that powers most "Pretty Print" buttons across VS Code, Sublime Text, and many online formatters. It handles HTML quirks well — collapsed whitespace, inline elements, embedded CSS and JavaScript, conditional comments, and custom elements. Options for indent size and line-wrap width let you match your project's house style.
Indent size is a style choice. Two spaces is the JavaScript-adjacent default (Airbnb, Standard, Prettier). Four is common in Python-adjacent codebases (Django templates, Ruby on Rails ERB). Tab indentation is useful when HTML is embedded in code that uses tabs.
Line wrap breaks long lines at a configurable width so attribute-heavy tags stay readable. 80 is the old-school default; 100 or 120 are more modern choices. Set to 0 to disable wrapping entirely (each tag on its own line, with attributes on the same line as the tag name regardless of total length).
Privacy: HTML is formatted entirely in your browser. Useful when the source includes embedded secrets, tokens, or pre-publication content you'd rather not paste into a third-party tool.
How to format HTML
- Paste minified HTML into the input panel.
- Pick indent and wrap width in the toolbar above.
- Copy or download the formatted output.
Features
- Powered by js-beautify — the same library behind most IDE pretty-print buttons.
- Indent size: 2, 4, or tab.
- Line wrap: 0 (off), 80, 100, or 120.
- Handles embedded CSS and JavaScript correctly.
- Runs in your browser — source never uploads.
Frequently asked questions
- Does formatting change how the page renders?
- No. Adding whitespace to HTML outside of <pre> blocks does not change rendering. The formatted output behaves identically to the original.
- Can I format HTML with embedded scripts and styles?
- Yes. js-beautify recognises <script> and <style> blocks and formats them with their language-specific rules.
- Is this the same as an HTML validator?
- No. A formatter only rewrites whitespace; it does not check that your HTML is valid. For validation, use the W3C HTML Validator.
- What's the difference between this and Prettier's HTML formatter?
- Prettier has stricter opinions and fewer options. js-beautify is more configurable and handles a wider range of HTML quirks. Both produce clean output; choose based on your project's house style.