Beautify and minify HTML with attribute wrapping and indent control.
Updated
Mode
Beautify options
Input HTML
Beautified
⌘EnterCopy output
⌘KClear input
Quick start
How to beautify or minify HTML
Paste HTML, choose beautify or minify, tweak indent and attribute-wrap options, then copy the result.
Step 1
Paste HTML
Drop any HTML — full page source, an email template, a CMS-pasted fragment — into the input pane on the left.
Step 2
Choose options
Pick Beautify or Minify. For Beautify, set indent size, line-wrap and attribute-wrap mode. Output updates as you type.
Step 3
Copy
Click Copy (or ⌘/Ctrl + Enter) to grab the formatted HTML. Nothing is uploaded — js-beautify runs in your browser.
In-depth guide
HTML formatter — beautify, wrap, minify
Paste any HTML (page source, fragment, email template) and get it re-indented to your style, with optional attribute wrapping. Toggle minify mode to strip whitespace and comments. Everything runs in your browser via the open-source js-beautify library.
Beautify vs minify — when to use which
Beautify when you're reading or editing code: indentation makes structure visible, line breaks separate logical sections, and code review is much easier on a pretty-printed file than on a single-line blob.
Minify when you're shipping the HTML to a production server (transactional email, AMP snippets, bandwidth-constrained widgets) and want the smallest possible payload. Typical savings: 20–40% off raw bytes.
In a modern build pipeline (Vite, Webpack, Next.js, Astro) minification happens automatically — you rarely need to do it by hand. The minifier here is for one-off snippets, email builders, and CMS-pasted content.
Attribute wrapping modes
auto — wrap attributes onto multiple lines when the tag exceeds the wrap-line-length threshold. Sensible default.
force — every attribute on its own line, always. Best for components with many props (React-style code-review).
force-aligned — like force, but wrapped attributes align to the column after the tag name.
preserve / preserve-aligned — don't change the source's existing line breaks within tag attributes.
Minify safety guarantees
The minifier deliberately avoids any change that could alter rendering or behavior:
Preserves contents of <pre>, <script>, <style>, <textarea> — whitespace there is semantic.
Strips HTML comments<!-- … --> but keeps IE conditional comments <!--[if IE]>…<![endif]-->.
Does not remove quotes from attributes, does not drop optional closing tags, does not collapse boolean attributes — those tricks can save a few extra bytes but introduce subtle parser-difference risks.
If you need maximum compression, use a dedicated tool like html-minifier-terser in your build pipeline; the trade-off is risk of breakage on uncommon constructs.
Common pitfalls
Validate the output before committing it, especially when fixing almost-valid input.
Escaping, comments, trailing commas, and mixed encodings are the usual source of surprising results.
For production config, keep a copy of the original until the consuming system accepts the rewritten file.
Privacy and security
Browser-first by design. The tool page explains any exception before you use it.
Pasted code and data are processed locally in the page. EpitomeTool does not send your input to a formatting, validation, or conversion API.
Frequently asked questions
Is my HTML uploaded to a server?
No. Both beautify and minify run entirely in your browser using js-beautify (a small open-source library that loads once per visit). The HTML you paste never leaves your device.
What does the formatter actually do?
Beautify re-indents every tag with consistent spacing, adds line breaks between block-level elements, leaves inline elements (a, span, em, strong, etc.) on the same line, and optionally wraps long attribute lists. Minify removes HTML comments, collapses whitespace between tags, and strips leading/trailing whitespace.
Will minify break <script>, <style>, <pre> or <textarea>?
No. The minifier explicitly preserves the contents of those tags untouched — their whitespace is semantically meaningful and any naive collapse would break the page. Only the HTML between tags is collapsed.
Does it preserve IE conditional comments?
Yes. Standard <!-- … --> comments are stripped, but conditional comments of the form <!--[if IE]>…<![endif]--> are preserved. Few projects still ship IE-only code paths but the safety is free.
Can I wrap attributes onto multiple lines?
Yes. The 'Wrap attributes' control offers four modes: auto (wrap if a line exceeds the wrap-line-length), force (every attribute on its own line), force-aligned (every attribute on its own line, aligned with the first), preserve / preserve-aligned (respect the existing wrapping).
Will it fix invalid HTML?
No. The formatter is layout-only — it does not parse a DOM, it does not close missing tags, it does not validate. Use the W3C HTML Validator for correctness checks. The formatter assumes the input is structurally valid.
Does it support Vue / Astro / Svelte / JSX templates?
Partial. js-beautify recognises most embedded JS/CSS and Vue/Angular directives via the wrap_attributes setting. Astro and Svelte template directives (e.g. {#if}, {@html}) may not be perfectly preserved — for framework-specific files, prefer the framework's own formatter (prettier-plugin-astro, prettier-plugin-svelte).
What's the maximum input size?
There's no fixed cap. js-beautify handles hundreds of kilobytes without issue. Multi-MB pages might feel sluggish but will complete.
Keep exploring
More tools you'll like
Hand-picked utilities that pair well with the one you're on — all
free, client-side, and zero-signup.