HTML Beautifier

Why formatting HTML matters

Raw HTML from a code generator, CMS export, or build tool often arrives as a single line or with inconsistent indentation. While browsers parse it identically regardless of whitespace, humans do not. Readable HTML is easier to diff in version control, easier to debug in browser DevTools, and far less likely to hide structural errors like unclosed tags or misplaced attributes.

Minification goes the other direction: it removes all unnecessary whitespace to reduce file size. For HTML served over HTTP, every byte you remove is a byte the network doesn't need to transfer — though in practice, HTTP compression (gzip or brotli) makes raw whitespace removal a modest gain compared to, say, removing unnecessary comments or redundant attributes.

How HTML parsing works (and why it's harder than JSON)

HTML has quirks that make formatting harder than JSON or YAML. A few that matter:

Void elements — certain elements like <br>, <hr>, <img>, <input>, <meta>, and <link> cannot have children and never have a closing tag. A formatter must know this list to avoid inserting spurious newlines or expecting </br>. js-beautify handles the HTML5 void element set correctly.

Optional closing tags — <li>, <td>, <tr>, <th>, <p>, and others have closing tags that the HTML5 spec makes optional. Browsers auto-close them; a naive formatter may misread nesting. The HTML5 parser in js-beautify accounts for these rules.

Self-closing syntax — <img /> and <br /> are valid in XHTML but not required in HTML5. The formatter preserves whichever style was in the original by default.

CDATA sections in SVG/MathML — inline <svg> may contain <![CDATA[...]]> blocks. A formatter should treat these as opaque text, not attempt to re-indent them.

Comments — <!-- ... --> and IE conditional comments (<!--[if lt IE 9]>) must survive both beautify and minify intact (unless you opt to strip comments during minification).

Indentation options

The tool supports 2-space, 4-space, and tab indentation. Which to choose depends on your project's .editorconfig or team convention. Two-space is dominant in front-end JavaScript projects and matches Prettier's HTML default. Four-space is common in legacy projects and some Python/Django templates.

When pasting the output back into a project, match the project's existing style. Mixing indentation sizes inside a file confuses diffs and most code review tools.

The <pre> and <textarea> exception

Whitespace inside <pre>, <textarea>, and <script type="text/plain"> is semantically significant. A <pre> block renders every space, tab, and newline exactly as written — that's the point of the element. A formatter must not re-indent content inside these elements.

js-beautify preserves whitespace inside <pre> and <textarea> by default. Watch out for tools that don't — they will visually corrupt <pre> code blocks and change <textarea> default values.

When to beautify vs minify

Beautify is for:

• Development and debugging.
• Code review and pull requests — indented HTML is much easier to review.
• Learning from third-party HTML: paste the source, indent it, read it.
• Editing a template received from a designer or CMS export.

Minify is for:

• Production assets served directly (when HTTP compression alone isn't sufficient).
• Inline HTML in JavaScript strings that will be inserted via innerHTML — every byte saved here is real.
• Email HTML: many email clients disable external CSS and inline styles get verbose; minifying the HTML itself can recover meaningful size.

In modern web apps, HTML is typically server-rendered or built by a bundler. Vite, webpack, and Next.js all minify HTML in production builds via html-minifier-terser. Use this tool for ad-hoc cleanup, one-off templates, or cases where you're not going through a bundler.

Using js-beautify for HTML

import beautify from 'js-beautify';

const pretty = beautify.html(rawHtml, {
  indent_size: 2,
  indent_char: ' ',
  max_preserve_newlines: 1,
  preserve_inner_whitespace: false,
  indent_inner_html: true,
  wrap_line_length: 0,        // 0 = no wrapping
  unformatted: ['pre', 'textarea'],
  extra_liners: ['head', 'body', '/html'],
});

Key options:

• unformatted — list of tags whose content should not be re-indented.
• indent_inner_html — whether to indent <head> and <body> contents.
• wrap_line_length — maximum line length before wrapping long attribute lists.

For minification, the recommended production library is html-minifier-terser:

import { minify } from 'html-minifier-terser';

const small = await minify(rawHtml, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  minifyCSS: true,
  minifyJS: true,
});

Alternatives and ecosystem

• Prettier — the standard formatter for most front-end codebases. Formats HTML, CSS, JS, TypeScript, JSON, and more with an opinionated style. Suitable for per-project formatting pipelines (.prettierrc).
• html-minifier-terser — more aggressive minification than js-beautify's minify mode: removes redundant attributes, collapses boolean attributes, inlines critical CSS. Preferred for production build pipelines.
• ESLint + eslint-plugin-html — linting HTML embedded in JS/TS files.

For quick one-off formatting without installing anything, this tool gives you the result in the browser immediately.

Privacy

All HTML processing runs in your browser. Your markup is never sent to a server.

Will beautifying HTML change how my page renders?

In nearly all cases, no. Browsers normalize whitespace in HTML: multiple spaces, tabs, and newlines in text content collapse to a single space. Indenting your markup changes whitespace between tags, not within visible text content. The one exception is content inside <pre>, <textarea>, or elements styled with white-space: pre — this tool preserves whitespace inside those elements exactly.

Does minification break inline JavaScript or CSS?

Not with careful options. js-beautify's minify mode removes inter-tag whitespace only — it does not rewrite the content of <script> or <style> blocks. For more aggressive minification that also minifies inline JS and CSS, use html-minifier-terser with minifyJS: true and minifyCSS: true. This tool targets quick cleanup; for production pipelines, integrate html-minifier-terser into your build step.

What are void elements and why do they matter?

Void elements are HTML tags that cannot have children: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <col>, <embed>, <param>, <source>, <track>, and <wbr>. They have no closing tag. A formatter that doesn't know this list may try to indent children that don't exist, producing malformed output. The HTML5-aware parser in js-beautify handles void elements correctly.

Should I use 2-space or 4-space indentation?

Match your project's existing convention. Two-space is the dominant standard in modern front-end JavaScript projects and matches Prettier's default. Four-space is common in legacy codebases, Python/Django templates, and some enterprise style guides. If you're starting fresh, two-space keeps deeply nested HTML from drifting too far right.

Why do some attributes end up on separate lines?

The wrap line length setting controls this. When an opening tag with many attributes exceeds the configured line length, js-beautify wraps attributes onto individual lines for readability. Set wrap length to 0 to disable wrapping entirely and keep all attributes inline, or set a value like 120 to allow long single-line tags before wrapping.

How does this compare to Prettier for HTML formatting?

Prettier is the industry standard for automated, consistent formatting across a codebase — install it once per project and every developer gets the same output. This tool is for ad-hoc formatting without any installation or config. Use Prettier in CI and pre-commit hooks; use this tool for quick one-off cleanup, pasting snippets, or exploring formatting on HTML you've copied from somewhere else.

Can I format HTML embedded inside JavaScript template literals?

Not directly — this tool formats standalone HTML only. For HTML inside JS/TS files (tagged template literals, JSX), Prettier handles that context automatically. Alternatively, extract the HTML string, format it here, then paste it back.

Is it safe to paste sensitive HTML here (internal dashboards, emails)?

All processing runs locally in your browser via js-beautify compiled to JavaScript. No content is sent to any server. You can verify by opening the browser's network tab — no requests are made when you paste and format. The page works offline once loaded.