DevToolsmith

HTML Formatter

Paste minified or messy HTML and get it back cleanly indented, with embedded CSS and JavaScript formatted too. Uses Prettier, so the output matches your editor, and nothing leaves your browser.

Runs 100% in your browser — nothing is uploaded

Input
Tip: drop a file here495 chars · 495 bytes · 4 lines
Formatted
748 chars · 748 bytes · 38 lines

Example

Before
<ul class="nav"><li><a href="/">Home</a></li><li class="active"><a href="/docs">Docs</a></li></ul>
After
<ul class="nav">
  <li><a href="/">Home</a></li>
  <li class="active"><a href="/docs">Docs</a></li>
</ul>

Formatting options

  • Indent: 2 spaces is the most common choice for HTML; use tabs if your project does.
  • Line width: where long tags wrap. Attributes move onto separate lines when a tag doesn’t fit.
  • Keep > on the last line: puts the closing > of a multi-line tag after the last attribute instead of on its own line (Prettier’s bracketSameLine).
  • Ignore inline whitespace: treats all whitespace as insignificant (htmlWhitespaceSensitivity: "ignore"). Cleaner output, but check that text spacing still looks right.

Format HTML in your project

Shell
npm install --save-dev prettier
npx prettier --write "src/**/*.html"

# Check formatting in CI without changing files
npx prettier --check .

Working on the styles or scripts separately? Use the CSS formatter or the JavaScript formatter. To show HTML code as text on a page, escape it with HTML escape.

Frequently asked questions

Can formatting change how my page looks?

Not by default. In HTML, whitespace between inline elements like <a>, <span> and <em> is visible: a line break between two links renders as a space. The formatter follows CSS display rules and only adds line breaks where they can’t change the rendering, which is why it sometimes produces odd-looking breaks like > <a. “Ignore inline whitespace” gives cleaner output but may add or remove spaces in text.

Does it format CSS and JavaScript inside the HTML?

Yes. Content of <style> tags is formatted as CSS, <script> tags as JavaScript (or JSON for type="application/json"), and inline event handlers are left as they are. The same options, such as indentation and quotes, apply to the embedded code.

Why does it report an error for my HTML?

Browsers accept almost anything, but a formatter has to understand the structure. Common causes are a closing tag that doesn’t match its opening tag (</div> where </span> was expected), an unclosed comment, or template syntax like {{ }} or <?php ?> mixed into the markup. The error message gives the line and column.

Which formatter does this use?

Prettier, the most widely used code formatter for web projects, running entirely in your browser. The output is the same as running npx prettier on your machine with the same options, so it matches what your editor or CI produces.

Can I format Vue single-file components?

Yes. Switch the language to Vue: the <template> is formatted as Vue HTML, <script> and <script setup> as JavaScript or TypeScript, and <style> blocks as CSS, SCSS or Less depending on their lang attribute.