Skip to content
PithLab

↑↓ to move · Enter to open · Esc to close

HTML Formatter, Beautifier and Minifier

Indent HTML neatly or shrink it with a safe minifier.

Use via API

Pretty-print HTML with consistent indentation, or minify it (collapse whitespace, drop comments). <pre>, <textarea>, <script> and <style> contents are kept as written when minifying. Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/html-formatter

curl https://pithlab.com/api/v1/tools/html-formatter \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"input":"<ul><li><a href=\"/\">Home</a></li><li>About</li></ul>"}'

Fields and responseOpenAPI documentGet an API key

About the HTML Formatter

Beautify messy HTML with clean indentation, or minify it by collapsing whitespace and removing comments while keeping pre, textarea and script content intact.

How to use the HTML Formatter

  1. Paste your HTML.
  2. Choose the indent width and whether to wrap long lines, then press Format.
  3. Press Minify to collapse whitespace. Tick the options to remove comments or every gap between tags.
  4. Copy the result or download it as an .html file.

Examples

Format a page with 2-space indentation

Input

<!DOCTYPE html><html><head><title>Hi</title></head><body><div class="card"><h1>Hello</h1><p>Some <b>bold</b> text</p><ul><li>One</li><li>Two</li></ul></div></body></html>

Output

<!DOCTYPE html>
<html>
  <head>
    <title>Hi</title>
  </head>
  <body>
    <div class="card">
      <h1>Hello</h1>
      <p>Some <b>bold</b> text</p>
      <ul>
        <li>One</li>
        <li>Two</li>
      </ul>
    </div>
  </body>
</html>
Minify HTML and remove comments

Input

<div class="card">
  <!-- note -->
  <h1>  Hello   world </h1>
  <pre>  keep
   this </pre>
  <b>a</b> <i>b</i>
</div>

Output

<div class="card"><h1>Hello world</h1><pre>  keep
   this </pre><b>a</b> <i>b</i></div>

Frequently asked questions

Does formatting change how my page looks?

Formatting only adds line breaks and indentation between elements. Content inside pre and textarea is left as written, and inline elements are kept together so spacing does not change.

How does the minifier stay safe?

It collapses runs of whitespace to one space and only removes whitespace next to block elements such as div or li. Gaps between inline elements like b and i are kept unless you ask for them to be removed.

Are scripts and styles changed?

No. Content inside script, style, pre and textarea is copied exactly. Use the JavaScript and CSS minifiers if you also want to shrink that code.

Are conditional comments removed?

No. Comments are removed when the option is ticked, but Internet Explorer conditional comments starting with <!--[if are always kept.

Why do I get an unclosed tag error?

The minifier found a < that starts a tag or comment but never reaches its closing >. The error gives the line number so you can find it.