How to use the html formatter
- Paste HTML or open an .html file.
- Choose the indent (2 spaces, 4 spaces or tabs) and the line length to wrap at.
- Pick how attributes wrap and whether existing blank lines are kept.
- Select Format HTML. Changing an option afterwards re-formats automatically.
- Copy the output or download it as an .html file.
Worked example
Minified page to readable markup
The sample is a one-line page with a nav list, a heading, a paragraph and an inline script. With 2-space indent it becomes nested, indented markup where each list item and paragraph sits on its own line, and the script and style blocks are indented as code.
How it works
Formatting uses the open source js-beautify HTML beautifier, loaded in your browser only when you first format. It tokenises the markup and re-emits it with consistent indentation; inline elements stay inline and embedded CSS and JavaScript are formatted with the matching beautifier.
Frequently asked questions
Is my data uploaded?
No. This tool runs entirely in your browser. Your input is processed on your device and is not sent to our server or stored.
Will it fix broken HTML?
No. It re-indents what you give it. Unclosed or misnested tags stay as they are, and indentation after them may look odd, which can help you spot the problem.
Can it format Vue, Svelte or template files?
It handles plain HTML best. Many template syntaxes survive because unknown tags and attributes are preserved, but check the output.
Does formatting change how the page renders?
Adding whitespace between block elements does not change rendering. Around inline elements, whitespace can occasionally add a visible space; elements such as pre and textarea are left untouched.
Limitations
- Does not validate or repair HTML.
- Whitespace-sensitive inline layouts can shift slightly after formatting; review before deploying.