peartools

HTML Formatter and Beautifier

Paste minified or messy HTML and get it back with each element on its own line and everything indented. Or go the other way and minify your markup to make it smaller. Everything runs in your browser, so your code stays on your device.

Indent
Result

What an HTML formatter does

HTML is often shipped minified, with all the whitespace removed so it loads faster, which makes it very hard for a person to read. A formatter, also called a beautifier, does the reverse: it rewrites the markup with each element on its own line and nested tags indented, so the structure is clear. This tool formats your HTML for reading and can minify it again when you are ready to ship. It changes only the spacing, never what the page shows.

Why use our HTML beautifier

  • ·Free. No signup, no paywall, no limits.
  • ·Runs in your browser. Your markup is never uploaded, so it is safe for private projects.
  • ·Beautify or minify. Clean it up for reading, or shrink it for production, in one place.
  • ·Your house style. Choose the indentation and whether long lines are wrapped.
  • ·Syntax highlighting. The editor colours tags, attributes, and text so it is easy to scan.

HTML formatter options

Format

Rewrites your HTML with each element on its own line and nested tags indented. Turns minified or messy markup into clean, readable code.

Before<ul><li>One</li><li>Two</li></ul>After<ul> <li>One</li> <li>Two</li> </ul>

Minify

Removes comments and the extra spaces and line breaks between tags to make the file smaller. Good for shipping HTML to production.

Before<ul> <li>One</li> </ul>After<ul><li>One</li></ul>

Wrap long lines

Breaks very long lines so no single line runs off the screen. Leave it off to keep each element on one line no matter how long it gets.

BeforeOne very long line of attributes...AfterBroken onto several readable lines

Indent

Choose 2 or 4 spaces for each level of nesting, so the formatted HTML matches the style used in the rest of your project.

Before2 spaces or 4 spacesAfterYour choice per level

When to format HTML

A formatter helps whenever markup is hard to read or needs to be smaller. These are the cases that come up most:

  • ·Reading a page's source. Paste minified HTML you copied from a page to see how it is built.
  • ·Cleaning up a snippet. Fix the indentation of markup from a CMS or an email template before you edit it.
  • ·Shrinking for production. Minify a page or a component so it downloads a little faster.
  • ·Learning HTML. See how a page nests its elements while you are still learning.

Run the same HTML formatter in your project

This tool uses js-beautify, a long-running open source beautifier. You can run it on your own files from the command line:

ToUse
Format a file in placenpx js-beautify --type html --replace index.html
Choose 2 space indentsAdd --indent-size 2
Format on save in an editorVS Code's built-in HTML formatter is also based on js-beautify, so Format Document gives similar results

Beautifying changes spacing and line breaks only. It does not check that your HTML is valid, so a missing closing tag can still slip through. The W3C validator at validator.w3.org checks for that.

Related formatters

Working across stylesheets and markup? These formatters run the same way, right in your browser:

Frequently asked questions

What is an HTML formatter?
An HTML formatter takes markup that is minified or has messy spacing and rewrites it with each element on its own line and nested tags indented, so it is easy to read. It does not change what the page shows, only how the code is laid out. This tool formats your HTML and can also minify it back down.
How do I format HTML?
Paste your HTML into the input box, pick your indentation, then click Format. The clean version appears below. Click the copy button to copy it, or download it as an .html file.
What does minify do?
Minify removes comments and the extra whitespace between tags, which makes the file smaller. Smaller HTML loads a little faster, so minified markup is common in production. The page still shows exactly the same content.
Does formatting change how my page looks?
No. Formatting only adds or removes whitespace between tags and indents the code. The elements, attributes, and text stay the same, so the page renders exactly as before. Be aware that whitespace can matter inside a few elements like pre and textarea, which are left untouched.
Is this a beautifier?
Yes. Format and beautify mean the same thing here: taking messy or minified HTML and laying it out cleanly with proper indentation. Some people call it an HTML beautifier, prettifier, or pretty printer.
Is my HTML kept private?
Yes. All formatting and minifying runs in your browser. Your HTML is never uploaded to a server or saved anywhere, so you can safely paste in markup from a private project. Once the page has loaded you can even use it offline.