html formatter

How to use the html formatter

  1. Paste minified or messy HTML into the input box — the formatter runs on every keystroke.
  2. Pick indent (2 spaces, 4 spaces, or tab), toggle preserve-blank-lines, and set a wrap column if you need a max line length.
  3. Switch the mode to 'Minify' to strip whitespace for production bundles; switch back to 'Beautify' for editing.
  4. Copy the formatted HTML to clipboard, or save it into your editor.

When to use it

Use it whenever you're pasted HTML from DevTools, a minified template, or a generated email, and need it readable before editing. The beautify output is stable enough to commit to source control. For production builds, the minify mode roughly matches what Vite or webpack's HTML plugin produces. Alternative: VS Code's built-in formatter uses the same js-beautify library — this tool is handy when you're away from an editor or need to share the output with someone via URL.

Frequently asked questions

What is an HTML formatter?
A tool that restructures raw HTML with consistent indentation and line breaks so it's easier to read and diff. This one uses js-beautify, the same formatter behind VS Code's built-in HTML mode.
Does the HTML formatter change my markup's behavior?
No. Only whitespace between tags is altered; element nesting, attribute order, and text content are preserved. Inside <pre> and <code> tags whitespace is left untouched.
Can I minify HTML here instead of formatting it?
Yes. Switch the mode to 'Minify' — the output strips newlines and collapses whitespace, matching what bundlers produce for production.
Why does my <script> or <style> block look odd after formatting?
js-beautify treats embedded JavaScript and CSS as foreign content. If you want inline scripts/styles formatted separately, paste them into dedicated JS or CSS formatters.
Is my HTML uploaded anywhere?
No. Formatting runs entirely in your browser — the HTML never leaves your machine.
Does the formatter support HTML5 semantic tags?
Yes. It handles <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, plus custom elements (anything with a dash in the tag name).

Related tools

Last updated: 2026-04-24