Make messy markup readable again

HTML that arrives as one long line, or with random indentation, is hard to debug. This beautifier takes whatever you paste into the HTML Source Code box and rewrites it so every element sits on its own line, indented by depth. Child tags step in, closing tags line up with their openers, and text nodes get their own line. It is aimed at cleaning up markup you did not write yourself: page-source copies, CMS exports, email templates and generated snippets.

Cleaning up a snippet, step by step

1. Paste your code into the editor, or press Paste to pull it from the clipboard. Load Sample fills in a small demo page if you only want to see what happens.
2. Pick an indent width in the Indentation dropdown: 2, 4 (the default) or 8 spaces.
3. Click Beautify & Refactor HTML. Changing the dropdown afterwards re-runs the cleanup automatically.
4. Read the result in the Beautified Output panel, then use Copy or Download, which saves a file named beautified.html.
5. Scroll to Visual Preview to see how your original markup renders in a frame.

The header shows a line count and a status that moves from READY to WAITING while you type and to SUCCESS after a run. Everything is processed by your browser's own HTML parser, in JavaScript on the page.

What the rewrite actually does

• Attribute values are always written with double quotes, whatever quoting the source used.
• Void elements such as br, img, hr, input, link and meta are written with a trailing slash.
• Because the browser parser does the reading, some unclosed tags are repaired rather than reported.
• If your input contains an html tag, you get the whole document back; otherwise only the body contents are shown.

Where it helps

• Reading a vendor's embed code or sample page that was delivered minified.
• Making a diff readable before you commit a template that a colleague pasted in as a single line.
• Tidying newsletter HTML from an email builder before hand-editing it.
• Teaching or reviewing: indentation makes wrongly nested elements easy to spot.

Things to know before relying on it

This is a structural rewrite, not a byte-for-byte reformat. HTML comments are not carried into the output, and text is trimmed, so whitespace inside pre blocks or textarea elements will not be preserved. Inline tags like b or a also get their own lines, which is readable but does change the source layout, not how the page looks. The preview renders your original input, so a script inside it may run there; avoid pasting code from sources you do not trust. Very large documents are limited only by what your browser can handle.

Related Tools

• Add Line Breaks
• Add Prefix
• Add Suffix
• Add Watermark