UlvixorHTML Formatter
Paste unindented, minified, or malformed HTML and get a readable version with consistent indentation. Formatting works by parsing the HTML with your browser's native parser and walking the resulting tree, with no external library involved.
How it works
- Paste or type your HTML into the input panel.
- Your browser parses the HTML with its native parser (DOMParser), which tolerates unclosed tags or incomplete HTML.
- A custom serializer walks the resulting tree and produces an indented version, respecting the rules for each element type.
- The content of pre, textarea, script, and style is preserved exactly as-is, without re-indenting it, because whitespace and line breaks are meaningful inside those elements.
- Copy the result or download it as an .html file.
Use cases
- Format minified HTML pulled from a page's source code to make it readable.
- Clean up HTML generated by automated tools or exported from visual editors.
- Review the structure of HTML templates before integrating them into a project.
- Debug malformed HTML (unclosed tags) by seeing how the browser interprets it.
Use cases
- Format minified HTML pulled from a page's source code to make it readable.
- Clean up HTML generated by automated tools or exported from visual editors.
- Review the structure of HTML templates before integrating them into a project.
- Debug malformed HTML (unclosed tags) by seeing how the browser interprets it.
Common mistakes
- Expecting the content of <script> or <pre> to be re-indented like the rest of the HTML.These elements preserve meaningful whitespace; the tool deliberately leaves them untouched so it doesn't break their behavior or appearance.
- Pasting HTML with badly closed tags and expecting the tool to show an error.The browser's parser is tolerant and tries to reconstruct a valid tree, just like it would when rendering a real page; the formatted result reflects that reconstruction, not an error.
- Using this tool to format JSX or framework templates (Vue, Angular).It's built for standard HTML; framework-specific syntax may not format the way you expect.
Frequently asked questions
No. Parsing and formatting happen entirely in your browser using DOMParser and a custom JavaScript serializer. Your HTML never leaves your device.
These are 'void' elements that never have content or a closing tag in HTML. The tool recognizes them and formats them correctly as <br>, <img ...>, or <input ...>, without trying to close them or nest content inside.
Inside pre, textarea, script, and style, whitespace and line breaks are part of the content's meaning (for example, a script's source code or a pre block's visual formatting). Automatically re-indenting them would change their behavior or appearance, so the tool preserves them exactly as they are.
The browser's HTML parser is intentionally tolerant: it tries to reconstruct a reasonable tree even with unclosed or badly nested tags, the same way it would when rendering a page. The tool formats the result of that reconstruction instead of failing.
Alternatives
Editor extensions like Prettier do the same thing inside your regular workflow. This tool is useful for a one-off formatting job with nothing to configure, for example when pasting HTML copied from another page.