HTML formatter and beautifier

The formatter is Prettier 2, loaded into this page. It parses your HTML into a tree, then prints it again with one element per line where that is safe, child elements indented, and long tags wrapped at the line width you pick. Attribute values, text and the content of <pre> stay as you wrote them.

With Format inline CSS and JS on, the content of <style> and <script> is formatted by Prettier’s CSS and JavaScript printers, so one paste fixes the whole file. Turn it off to leave embedded code alone, for example when it holds template syntax.

Options: indent with 2 spaces, 4 spaces or tabs; line width 80, 100 or 120; one attribute per line (Prettier’s singleAttributePerLine); and the whitespace setting below. Turn on the rendered preview to see the result in a sandboxed frame with scripts disabled, so you can check that formatting did not change the page. Need JSON or SQL instead? Use the JSON formatter or the SQL formatter. Looking for a full editor setup? Browse IDE and editor tools on DevHunt.

In HTML, whitespace between inline elements is visible. <b>bold</b> <i>italic</i> shows a space between the two words, and <b>bold</b><i>italic</i> does not. Between block elements like <div> or <li>, browsers ignore it. A formatter that adds line breaks without knowing this can change how your page looks. Prettier’s htmlWhitespaceSensitivity option controls it:

Gotcha: the default decides by each element’s default display. If your CSS turns <li> into inline-block (a common horizontal menu), whitespace between items becomes visible gaps, and only Strict keeps it exactly as it was.

The same Prettier output you get here, in your project:

# format every HTML file in the project
npx prettier --write "**/*.html"

# check formatting in CI without changing files
npx prettier --check "**/*.html"

Put the options in a .prettierrc file so everyone gets the same result:

{
  "printWidth": 100,
  "tabWidth": 2,
  "htmlWhitespaceSensitivity": "css",
  "singleAttributePerLine": false
}

In Node, call the API directly. Prettier 3’s format returns a promise; Prettier 2’s returns a string.

import * as prettier from 'prettier';

const pretty = await prettier.format('<div><p>Hello</p></div>', { parser: 'html' });

In Python, BeautifulSoup’s soup.prettify() puts each tag on its own line. It does not know about inline whitespace, so check the result in a browser.

Minify mode makes the markup smaller without changing what the page shows. It is careful by design: it only drops whitespace that the browser would ignore anyway.

The size cards show bytes before and after, and the gzip size of each. Most servers send HTML gzip or Brotli compressed, so the gzip number is closer to what users download. To shrink a stylesheet or a script on its own, use the CSS minifier or the JavaScript minifier.