What this tool does
Paste HTML on the left. Format re-indents it so each tag sits on its own line at the right depth. Minify collapses whitespace and removes comments. The right-hand panel switches between a live preview and the resulting code, and you can copy or download the output.
How to use it
- Paste your HTML into the editor.
- Press Beautify / Indent or Minify HTML.
- Switch the right panel between the live preview and the formatted source, then Copy HTML or Download .html.
What to expect from the formatter
The formatter is simple and token-based. It walks through the tags, increases the indent after an opening tag and decreases it after a closing tag, and leaves void elements like <br>, <img> and <input> alone. It works well for ordinary markup such as exported email templates, page fragments or the output of a page builder.
It is not a full HTML parser, so a few things are worth knowing:
- It does not fix broken HTML. An unclosed tag stays unclosed, and the indentation after it can look wrong.
- It does not reformat the CSS inside
<style>or the JavaScript inside<script>. - Whitespace-sensitive blocks such as
<pre>and<textarea>can be altered. Check them after formatting. - There is no option to change the indent size or keep comments when minifying. Minify always drops comments.
The live preview
The preview renders your HTML in a sandboxed frame on the same page. It is useful for checking an email snippet or a small component. Scripts are not meant to run there, and anything that depends on external stylesheets or relative image paths may look different from your real site.
When it helps
- Reading a minified page source you copied from the browser
- Cleaning a snippet before pasting it into a ticket or documentation
- Shrinking a static HTML snippet by a few percent
For production sites, a build step or your caching plugin’s HTML minify option is a better place to minify. Test the result either way, because aggressive minifiers can break inline scripts and <pre> text.
Does it validate my HTML?
No. It only changes whitespace and removes comments when minifying. Use a validator or your browser’s developer tools to find invalid markup.
Will minifying break my page?
It can if the page depends on whitespace, for example inside `<pre>` blocks, or on comments such as conditional comments. Always preview the result before using it.
Is my HTML uploaded?
No. Formatting and the preview both run in your browser.
Can I change the indentation width?
Not in this tool. Format it, then adjust indentation in your own editor if you need a different width.
What does the live preview show?
Your HTML drawn in a sandboxed frame on the same page. It is useful for small snippets, but external stylesheets and relative image paths may look different from your real site.