HTML Formatter and Minifier

Paste anything from a snippet to a whole page. The output updates as you type.

1. Paste your HTML into the Input box, or press Paste. Fragments without <html> or <body> work fine, and Try it loads a short example.
2. Set Mode to Beautify for indented markup, or to Minify to shrink it.
3. Choose the Indent: 2 spaces, 4 spaces or Tab. It only affects Beautify.
4. Read the status line. It says "Beautified", or for Minify it shows the before and after length and the percentage saved.
5. Press Copy or Download .txt. Use as input moves the result back into the input box.

Beautify uses the js-beautify library inside your browser, the same code that sits behind many editor plugins. Nothing is uploaded, so pages with embedded keys, customer data or unreleased content stay private.

Beautify rebuilds the indentation from the tag structure. The example <div><p>Hi</p></div> becomes three lines, with the paragraph indented one level inside the div. On a full page the children of html, head and body are all indented, blank lines between elements are removed and long lines are not wrapped.

• Inline elements such as a, span, strong and code stay on the same line as the surrounding text, because a line break there would add a visible space.
• The contents of pre are left exactly as written.
• The code inside script and style blocks is tidied as well, with the same indent, so you do not need a separate pass for embedded JavaScript or CSS.
• Attributes keep their order and quoting, and the doctype is kept.

The beautifier does not repair markup. If a tag is never closed, everything after it is pulled one level deeper, which is a quick way to spot the missing tag: look for the place where the indentation stops coming back.

Minify strips comments, removes whitespace between tags, collapses runs of whitespace to one space and trims the ends of the document. A four-line list, <ul>, two <li> items with indentation and </ul>, drops from 40 characters to 33, and the status line reports the saving as 18 percent. It does not remove optional closing tags, rename classes or shorten attribute values.

Four details decide whether the output is safe for your page:

• Conditional comments for old Internet Explorer, which begin with <!--[if, are kept. Ordinary comments are removed.
• The contents of pre, textarea, script and style are copied through untouched, so embedded code is not minified.
• Whitespace between two tags is removed even when both are inline. Two links separated by a space, such as <b>one</b> <i>two</i>, become joined, and the visible space disappears.
• Runs of spaces inside attribute values collapse too, so class="a b" becomes class="a b".

Compression already handles repeated whitespace well, so the gain after gzip or Brotli is small. Minify matters most for email templates, embed codes and pages served without compression.

HTML usually arrives in one of two states: a single line from a CMS, a bundler or view-source, or a file whose indentation drifted over the years. Beautify fixes both and makes nesting mistakes visible.

• Clean up a template exported from an email or page builder before you edit it.
• Format a component copied from browser dev tools so it fits your project.
• Prepare markup for a code review, with the diff checker comparing two formatted versions.
• Minify a snippet for an embed code or a srcdoc attribute.

Template syntax from PHP, Twig, Blade or Jinja is passed through but not understood, so check places where tags are generated conditionally. For strict XML-style markup such as XHTML or SVG, the XML formatter also checks that tags are well-formed. To shrink embedded styles or scripts, use the CSS formatter and the JavaScript formatter, then paste the result back. Markdown writers can export HTML from the Markdown editor and tidy it here.