HTML Formatter / Beautifier

The HTML Formatter / Beautifier takes raw, minified or poorly indented HTML and outputs clean, consistently indented, readable markup with syntax highlighting. It's built for front-end developers, template editors and anyone who needs to audit or share HTML without fighting a wall of code.

HTML

Minified or messy HTML

Indent with

Indent size

Inline up to

Block elements go on their own lines; text and inline tags (a, strong, em, code, span...) stay together. <pre> and <textarea> are kept exactly, script bodies verbatim, CSS and JSON re-indented. Missing closing tags are not added.

Formatted HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      .card{padding:1rem}
      .card h2{margin:0}
    </style>
  </head>
  <body>
    <nav class="nav">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About us</a></li>
      </ul>
    </nav>
    <main>
      <section class="card">
        <h2>Hello <em>world</em></h2>
        <p>Some <strong>bold</strong> text and <a href="#more">a link</a>.</p>
        <img src="photo.jpg" alt="A photo">
        <pre>  keep   this
    spacing</pre>
      </section>
      <table>
        <tr>
          <th>Plan</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>Pro</td>
          <td>$19</td>
        </tr>
      </table>
    </main>
    <script>
  document.querySelector(".nav").dataset.ready = "true";
    </script>
  </body>
</html>

How to use

Paste your raw or minified HTML into the input box.
Choose spaces or tabs, the indent size and how long a line of inline content can get before it's split.
Review the formatted, highlighted output; it updates as you type.
Copy the beautified HTML or download it as an .html file.

Why use this tool?

Indenting HTML by hand wastes time and introduces inconsistency, especially in large templates or CMS-generated markup. This tool formats instantly in your browser with no Node.js, npm package or signup. It handles deeply nested structures, inline and void elements, and optional closing tags, so the output matches real-world coding standards.

Frequently asked questions

What is the HTML Formatter / Beautifier?

A browser-based tool that takes messy, minified or inconsistently indented HTML and reformats it into clean, readable markup using your chosen indentation.

Can this tool format HTML with embedded CSS and JavaScript?

Yes. The contents of <script> blocks are kept exactly as written, because JavaScript template literals can span lines and re-indenting them would change your strings. CSS in <style> and JSON in JSON-LD scripts are re-indented to match the surrounding HTML, which is safe for those languages. <pre> and <textarea> content is never touched.

Does it add missing closing tags?

No. HTML lets you leave out some closing tags, such as </li>, </p> and </td>. The formatter understands where those elements end for indentation, but it never adds tags your source didn't have, so the output means exactly what the input meant.

Is it free?

Yes, the HTML Formatter / Beautifier is free with no signup required. It runs entirely in your browser, so nothing you paste is uploaded. Built by the Canvas Builder team.

Stop tweaking snippets. Build the whole site

This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.

Start building free Build a site from this