HTML Formatter

About the HTML formatter

An HTML formatter (also called a beautifier or prettifier) takes markup that has been minified onto one line or indented inconsistently and rewrites it with a clean, predictable structure: one logical element per line, child elements indented under their parents, and uniform spacing. The text content and tag semantics are untouched, only the whitespace between tags changes, so the page renders exactly the same.

This tool runs the widely used js-beautify library entirely in your browser. The same engine powers the "Format Document" command in many editors, so the output matches what most developers already expect. Paste minified output from a build step, a fragment copied out of DevTools, or markup pasted from a chat thread, click Run, and read or copy a tidy version. Because the work happens locally, nothing you paste leaves the page, which matters when the markup contains internal URLs, draft copy, or tokens you would not want to send to a server.

Formatting is most valuable at the moments markup turns unreadable: a templating engine concatenates everything onto one line, a CMS exports a wall of nested divs, or a teammate pastes a fragment with mixed tabs and spaces. A consistent indent makes the structure obvious at a glance, so you can find the element you need, spot a misplaced closing tag, and diff two versions cleanly in version control.

How beautifying works

The formatter parses your HTML into a tree of elements, then prints that tree back out with one rule per node: open a tag, increase the indent, print the children, decrease the indent, close the tag. Whitespace-sensitive elements are detected and left exactly as they are.

output = html_beautify(input, {
  indent_size: 2,          // two spaces per nesting level
  wrap_line_length: 0,     // 0 = do not force-wrap long lines
  preserve_newlines: false // collapse stray blank lines
})

• indent_size: how many spaces each nested level adds. Two is the common HTML convention.
• wrap_line_length: 0 leaves long attribute lists on one line; a positive number wraps them.
• Protected tags: pre, textarea, and script/style contents keep their own spacing so nothing visible shifts.

Worked example

Paste this minified one-liner into the box above and click Run:

<div class="card"><h2>Hello</h2><p>Hi <b>there</b></p></div>

The formatter walks the tree and re-indents it node by node:

<div class="card">
  <h2>Hello</h2>
  <p>Hi <b>there</b></p>
</div>

Beautify versus minify

Formatting and minifying are mirror images of the same whitespace operation. A formatter optimises for the human reading the code; a minifier optimises for the browser downloading it. A typical workflow uses both at different stages: beautify while you author and debug, then let your build pipeline minify the same file before it ships to users. Knowing which one you want avoids the common surprise of a "formatter" that makes the file bigger.

Common mistakes and pitfalls

• Expecting it to fix invalid HTML. A formatter assumes the input parses. Unclosed tags or stray angle brackets can produce odd indentation; validate the markup first if it looks wrong.
• Reformatting inside pre or textarea by hand. Those elements render whitespace literally. The tool protects them, but if you add line breaks manually afterward, the visible text will change.
• Treating it as a minifier. Beautifying makes files larger, not smaller. For shipping, run a minifier in your build step instead.
• Forgetting to copy before leaving. Output lives only in the page. Click Copy output before navigating away, because nothing is saved.
• Assuming byte-for-byte parity with Prettier. js-beautify is conservative and may differ slightly from Prettier on line wrapping and quote style.

Related developer tools

Frequently asked questions