HCODX/HTML Formatter
100% browser-based · powered by html-beautify

HTML Formatter

Restore readable structure to compressed or generated HTML. Configurable indent, line wrap, and embedded <style>/<script> formatting. Powered by html-beautify — the HTML half of js-beautify.

Drop HTML file
.html, .htm, .xhtml, .xml, .txt
minified.html
formatted.html
Beautify options
Input size
0 B
Output size
0 B
Lines added
0
Status
Ready
300K+
Files Beautified
2×
Faster to Read
35K+
Happy Developers
4.9 / 5
User Rating
Example

Minified in, readable out

Same markup, different shape. Rendering is identical — only whitespace, indentation, and line breaks change.

Minified input
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Hello</title></head><body><header><h1>Welcome</h1></header><main><p>Lorem ipsum.</p></main></body></html>
Formatted output
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hello</title>
</head>

<body>
  <header>
    <h1>Welcome</h1>
  </header>
  <main>
    <p>Lorem ipsum.</p>
  </main>
</body>

</html>
Use cases

When you need readable HTML, fast

Inspecting markup from a server-rendered page, scraped content, or template output.

Inspect generated markup

SSR frameworks emit dense HTML. Format it to see the structure your browser receives.

Clean up scraped content

Convert messy HTML pulled with curl or a scraper into something a human can read.

Diff before review

Format both versions before Code Diff — line-based diffs need real lines.

Learning by reading

Format a popular site's HTML to study how production templates organize content.

Step by step

How to format HTML

1

Paste or drop your HTML

Paste markup into the left editor or drop a .html file onto the upload area.

2

Pick your style

Choose indent, line wrap, end-of-line, and whether to format embedded <style> / <script>.

3

Click Beautify

html-beautify runs locally. The right editor fills with the formatted result.

4

Copy or download

Copy with one click, or download as formatted.html.

FAQ

Frequently asked questions

For most HTML, no — only whitespace and indentation change. Caveat: whitespace between inline elements (e.g. <span>A</span> <span>B</span>) renders as a visible space. The default options leave inline content alone, but always re-test.

Because their content is whitespace-sensitive. Toggle Preserve <pre> & <textarea> off only if you know your content is safe to reflow.

Yes — toggle Format inline JS and Format inline CSS. <script> blocks go through js-beautify; <style> blocks go through css-beautify.

html-beautify can format JSX-like syntax for casual reading but doesn't understand JSX expressions. For production-quality JSX formatting, use Prettier.

No. html-beautify is loaded as a static script from a CDN; everything runs in your browser.

About

About HTML formatting

HTML formatting (a.k.a. pretty-printing) puts indentation and line breaks back into compact markup so humans can follow the structure. The transformation is whitespace-only — no tags are added or removed.

What this tool does

  • Indents nested elements
  • Wraps long attribute lists at a configurable line length
  • Optionally formats embedded <style> and <script> contents
  • Preserves whitespace inside <pre>, <textarea>, and similar elements
  • Honors LF or CRLF line endings

Watch out for

  • Inline-level whitespace. Whitespace between inline elements (<span>, <a>) is visible space. Defaults preserve this; aggressive toggles can affect rendering.
  • Custom elements / web components. The tool treats unknown tags as block-level by default. If your component is inline, the result may have extra whitespace.
  • Templating syntax. Handlebars, Jinja, ERB, etc. should pass through, but mileage varies — verify before deploying.

Powered by html-beautify

The transformation engine is the HTML half of js-beautify — battle-tested in VS Code, dozens of editor plugins, and many other tools.