Runs 100% in your browser — nothing is uploaded
Formatters & Minifiers

HTML Formatter / Beautifier

Beautify minified or messy HTML with configurable indentation, wrapping, and a one-click minify toggle.

HTML Formatter / Beautifier
Client-side

About this tool

The HTML Formatter takes minified, single-line, or inconsistently indented HTML and reflows it into clean, readable markup — instantly, as you type. Paste a compressed HTML response, a bundler's output, or a template dump from a CMS export and get back properly nested, indented markup you can actually read and edit.

Under the hood, this tool uses js-beautify's battle-tested html_beautify engine — the same formatter that powers VS Code's built-in HTML formatting and countless IDE extensions. You control the indent size (2 spaces, 4 spaces, or tabs), whether existing blank lines are preserved between elements, and an optional line-wrap width (80 or 120 characters) for long attribute lists.

Everything runs client-side in your browser tab. There is no upload, no server round-trip, and no third party ever sees your markup — which matters when the HTML you're formatting contains draft content, internal tooling, or anything not yet public. Open your Network panel while using it and you'll see zero outbound requests.

A "Minify" button is also included for the reverse operation: a lightweight, dependency-free whitespace collapse that strips the newlines and indentation back out between tags, useful for quickly round-tripping or eyeballing byte savings. For full minification with comment stripping and optional-tag removal, use the dedicated HTML Minifier tool. Common use cases: debugging a minified production page's source, cleaning up HTML pasted from Word or Google Docs, formatting server-rendered templates, and reviewing HTML email markup before sending.

FAQ

Does this tool send my HTML to a server?
No. Formatting runs entirely in JavaScript inside your browser tab using the js-beautify library, which is loaded once and executed locally. Open your browser's Network panel while formatting — you will see zero outbound requests.
What indent options are available?
2 spaces, 4 spaces, or tabs. This matches the indentation conventions used by most editor configs and .editorconfig files, so you can format HTML to match your project's existing style.
What does "preserve newlines" do?
When enabled, blank lines that already exist in your source are kept (collapsed to a maximum run) rather than being fully removed. This helps preserve intentional visual grouping between sections of markup, like separating a header block from a content block.
What happens with malformed or unclosed HTML?
js-beautify is tolerant of malformed markup — it does its best to indent what it can parse rather than throwing an error. It will not silently "fix" missing closing tags, so always double-check formatted output against the original if your source HTML is broken.
What is the difference between this and the HTML Minifier tool?
This tool beautifies HTML for readability (indentation, line breaks, wrapping). The dedicated HTML Minifier tool does the opposite — it strips comments, collapses whitespace, and optionally removes optional closing tags to produce the smallest possible byte size for production.