HTML Prettifier

What is HTML Prettifier?

Paste minified or messily-indented HTML and get it reformatted into clean, consistently indented markup, powered by Prettier, the same formatter many code editors use. Great for making sense of a minified page's source or cleaning up hand-written HTML before committing it.

How to Use HTML Prettify

1. 1

   Paste the Minified or Messy HTML: Enter compact or unevenly indented HTML.

2. 2

   Read the Formatted Result Instantly: The cleanly indented markup appears automatically as you type.

3. 3

   Copy the Result: Use the copy button to copy the readable HTML.

How It Works

Prettier's HTML parser reads the markup into an AST of nested elements, then re-prints it with each block-level element on its own line, indented one level deeper than its parent, regardless of whether the original was a single unbroken line or unevenly spaced. Attributes and text content aren't altered, only how the tags are laid out.

Example

<div><h1>Welcome</h1><p>Hello world</p></div>

<div>
  <h1>Welcome</h1>
  <p>Hello world</p>
</div>

Each block-level element moves to its own line, indented one level deeper than its parent.

Common Use Cases

• Reading a minified page's markup pulled from "View Source" or devtools, where the original formatted source isn't available.

• Cleaning up HTML generated by a template engine or scaffolding tool before hand-editing it.