HTML Formatter & Minifier

What is an HTML formatter?#

An HTML formatter takes markup that has lost its shape — output from a template engine that collapsed every tag onto one line, a snippet pasted with someone else’s indent style, or a chunk of an email template that grew over months — and re-indents it so the nesting is obvious at a glance. The reverse job, minifying, squeezes the same markup down by removing everything a browser does not need: comments and the whitespace between tags.

This page does both, and the two directions are built differently because HTML demands it. Format uses js-beautify’s html_beautify, which indents elements consistently and preserves the line breaks you actually want. Minify is a conservative, hand-written scanner. The single most important rule it follows is that the content of <pre>, <code>, <textarea>, <script> and <style> elements is left completely untouched — collapsing whitespace inside a <pre> block or a <script> would corrupt the page, because in those elements whitespace is part of the data, not decoration. A naive minifier that does not know this is exactly how a code sample suddenly loses its indentation on a live site.

How to use it#

1. Paste your markup into the HTML pane on the left, or click Sample for a short example document.
2. Choose an Indent on the toolbar: 2, 4 (the default for HTML), or tab. Four spaces is a common house style for markup because nested tags add up fast.
3. Click an action:
   • Format — re-indent through js-beautify, preserving existing newlines so manually broken lines are not mashed together.
   • Minify — drop HTML comments, collapse inter-tag whitespace to nothing, and trim whitespace in ordinary text nodes — while leaving the inside of <pre>, <code>, <textarea>, <script> and <style> exactly as written.
4. Read the result in the Output pane. Use Copy in the output header to take it; Clear resets both panes.

Key features#

• Preserves what matters. <pre>, <code>, <textarea>, <script> and <style> content is copied verbatim during minification. The whitespace inside those elements is meaningful; removing it would change what the browser renders.
• Comments stripped on minify, kept on format. <!-- ... --> blocks are removed only when you explicitly ask to minify. Formatting leaves them in place.
• HTML-friendly default indent. Four spaces, because deeply nested markup reads better with a wider step. Switch to 2 or tab if that matches your project.
• Two-pane, copy-ready. Editable input, read-only output, one-click copy.
• Runs in your browser only. js-beautify is bundled with the page and loaded on demand; no backend, no upload, your markup stays on your device.

Worked example#

A fragment of a product card pulled from a template, with a comment and a <pre> block inside:

Input:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Click Format with 4 spaces:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Now click Minify on the same input:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

Three things to notice. The comment is gone. The whitespace between tags is gone — the </span> and <pre> now sit directly adjacent, which is safe because inter-tag whitespace in HTML is decorative. But the newline inside the <pre> (npm install over npm run build) is still there, exactly as written. That is the rule doing its job: collapse decoration, preserve data.

FAQ#

Why are some single spaces kept between tags after minify?#

Whitespace-only text nodes that sit between block-level tags are dropped entirely. But a single space inside a line of text — Hello <em>world</em> — is significant, because removing it would join the words. The scanner keeps meaningful text-node spaces and only removes purely decorative inter-tag whitespace.

Does minify remove attributes, quotes, or default values?#

No. It does not rewrite attribute syntax, strip quotes, collapse boolean attributes, or remove type="text". Those transformations require a full HTML parser with schema knowledge and are easy to get wrong; this tool stays on the safe side and only removes comments and decorative whitespace.

Will it minify the JavaScript inside my <script> tags?#

No. The entire content of <script> is passed through untouched — both because changing it could break ASI and because a separate JS minifier lives on the format/js page. If you want the script minified, pull it out, run it through that tool, then paste it back.

Does it understand templating syntax like {{ var }} or {% if %}?#

Format will re-indent around template tokens and usually produces readable output. Minify treats template tags as ordinary text, so it will not collapse whitespace inside them in a way that changes their meaning. For heavy templating, treat the output as a strong starting point and verify against your renderer.