HTML Beautifier

About the HTML Beautifier

HTML that comes out of a minifier, a CMS export or a page builder is often one long line or a tangle of inconsistent indentation. The HTML Beautifier turns it into a clean outline: every block element on its own line, children indented under their parents, and inline elements like links and bold text left in the flow of the sentence.

It also formats what is inside <style> and <script> blocks, so a page with inline CSS and JavaScript comes out readable from top to bottom. Content inside <pre> and <textarea> keeps its exact spacing.

You choose the indent, how tags with many attributes are wrapped, the maximum line length, and whether <head> and <body> are indented inside <html>. Everything runs in your browser, so the HTML you paste never leaves your device.

How to use it

1. Add your HTMLPaste a page or a snippet, drop an .html, .htm, .vue or .svg file onto the box, or use Open file. Sample loads a minified page with a style block and a script.
2. Pick an indent and line lengthChoose 2 spaces, 4 spaces or tabs, and a line length of 120 characters, 80 characters or no limit.
3. Choose how attributes wrap"Wrap long tags" moves attributes to the next line only when a tag gets too long. "One attribute per line" puts every attribute of a multi-attribute tag on its own line. "Keep as written" leaves your attribute layout alone.
4. Set the extrasIndent head and body, Keep blank lines (up to one in a row) and Format inline CSS and JavaScript are on by default.
5. Copy or downloadThe status line counts the lines. Copy the formatted HTML or save it as page.html.

Key features

Examples

Formatting the sample page

The Sample button loads 456 characters of minified HTML. With the defaults, the status line reads Formatted · 26 lines:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Spring sale</title>
    <style>
      .banner {
        color: #c00;
        padding: 10px
      }
    </style>
  </head>
  <body>
    <div class="banner" id="top" data-campaign="spring-2026" aria-label="Spring sale banner">
      <p>Save <strong>20%</strong> on all garden tools.</p>
      <ul>
        <li><a href="/tools">Tools</a></li>
        <li><a href="/seeds">Seeds</a></li>
      </ul>
    </div>
    <script>
      const t = document.title;
      document.title = "Welcome | " + t;
    </script>
  </body>
</html>

The paragraph stays on one line because strong is an inline element, and each list item keeps its link on the same line.

How the options change the sample

With a line length of 80, the long div tag wraps after data-campaign="spring-2026", and aria-label moves to the next line. With "Indent head and body" off, head and body start at the left edge, which saves one indent level on every line of the page.

One attribute per line

This layout is popular in component code because adding or removing one attribute changes one line in a diff:

<div
  class="banner"
  id="top"
  data-campaign="spring-2026"
  aria-label="Spring sale banner"
>

Tags with a single attribute, like <html lang="en">, stay on one line.

Preformatted text

In <div><pre> keep this followed by a line break and as is</pre></div>, the div is indented, but the text inside pre keeps its two leading spaces, its triple spaces and its own line break.

Tips

• Copy the HTML from your browser's developer tools (Elements panel, then Copy outerHTML) to read the structure of any page section.
• Choose "One attribute per line" for components and templates under version control. Diffs become much easier to review.
• Set the line length to "No limit" if you want each tag on one line regardless of length, for example when you are going to search the code line by line.
• Look at the indentation to find nesting mistakes. An element that is indented deeper than you expect usually has an unclosed tag above it.
• To prepare the page for production again, run it through the HTML Minifier.

Common mistakes and limits

• Expecting the HTML to be validatedThe beautifier does not report errors. Unclosed tags are formatted as they are, and the indentation simply follows them. Check unusual indentation yourself.
• Beautifying content where spaces matterWhitespace between block elements is reorganized. That is safe for normal pages, but text inside elements styled with white-space: pre can change. Only <pre> and <textarea> are protected automatically.
• Formatting templates with logicTemplate tags like {% if %} or <?php ?> blocks are treated as text and may end up indented in surprising ways. Check the result before you commit it.
• Expecting JSX to workJSX is not HTML. Use the JavaScript Beautifier for React components; Vue single-file components with <template> and <script> do work here.
• Expecting minified inline code to come backInline CSS and JavaScript are formatted, but removed comments and shortened variable names cannot be restored.

Frequently asked questions