HTML Formatter & Beautifier
Paste minified or messy HTML and get it back with proper indentation, line breaks between block elements, and consistent tag casing. The reverse direction — minifying for production — is one toggle away. Works on full documents, fragments, JSX-like markup, and templating syntax from Handlebars, Twig, or ERB.
Why HTML Formatting Matters
Browsers don't care about whitespace inside HTML, but humans do. A minified bundle pulled out of a CDN, a server-rendered fragment from a framework, or a chunk of inherited code copy-pasted from a CMS will routinely arrive as one long line with no breaks. Reading that requires either an editor with format-on-paste or a tool that fixes it in place. Formatting also makes diffs sane — see the text diff tool for what an unformatted vs formatted diff looks like.
Beyond readability, consistent formatting catches real bugs. Mismatched tags, accidentally-nested forms, and unclosed elements all surface visually once the indentation is correct. The formatter doesn't fix invalid HTML, but it surfaces it: indentation gets weird in exactly the spot where the parser had to guess.
How It Works
The HTML is tokenized into tags, attributes, text nodes, and comments. Block-level elements (<div>, <section>, <p>, <table>, etc.) get newlines before and after, with their content indented one level deeper. Inline elements (<a>, , ) stay on the same line as their surrounding text to preserve word-break behaviour. <pre> and <textarea> content is treated as literal — the formatter won't touch whitespace inside them because that whitespace is rendered. Self-closing tags follow XHTML conventions if your input uses them.
The minify mode reverses the same logic: it strips inter-tag whitespace, collapses multi-space runs in attribute values, removes comments (optionally), and joins the document into a single line. The result is byte-equivalent to what a CDN-side HTML minifier would produce, which is useful for testing payload sizes against a budget.
Common Use Cases
Cleaning up HTML pulled from a view-source: or a network-tab response. Preparing a static fragment to paste into a documentation page or blog post. Generating a minified version of an email template before sending. Inspecting the output of a server-side renderer to verify it matches what you expected. Pair with the JSON formatter when working with API responses that contain embedded HTML strings.
How We Compare
VS Code's built-in Shift+Alt+F formatter uses Prettier under the hood and produces output very close to what you'll see here. The differences are in edge cases: handling of templating syntax, line-length wrapping inside long attribute lists, and how comments are treated. For one-off cleanups outside an editor, a web tool is faster than opening VS Code; for project-wide formatting, an editor or prettier --write is the right tool. This formatter runs in your browser — no signup, no upload, no payload limit beyond what the browser tab can hold in memory.
Related tools
- If the HTML you're cleaning came from a PDF, the PDF to HTML converter converts the PDF straight to semantic HTML with inferred headings and preserved links.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools