Paste, type, choose a local .html/.htm file, or drop one onto the editor. Press Ctrl/Cmd+Enter to run the selected mode.
Review the processed result before using it in production. Output is not autosaved.
Ready. Add HTML and choose a mode.
This sample includes nested and inline elements, a removable comment, preformatted text, CSS, and JavaScript. Byte totals use UTF-8 bytes and are calculated from the exact snippets shown.
<!doctype html>
<html><head><style>body { color: #222; }</style></head>
<body>
<main><h1>Hello <em>world</em></h1>
<!-- remove in minified output -->
<p>Inline <strong>spacing</strong> matters.</p>
<pre>keep these
spaces</pre></main>
<script>const greet = () => console.log('hello');</script>
</body></html><!doctype html>
<html>
<head>
<style>
body { color: #222; }
</style>
</head>
<body>
<main>
<h1>Hello <em>world</em></h1>
<!-- remove in minified output -->
<p>Inline <strong>spacing</strong> matters.</p>
<pre>keep these
spaces</pre>
</main>
<script>
const greet = () => console.log('hello');
</script>
</body>
</html><!doctype html><html><head><style>body{color:#222}</style></head><body><main><h1>Hello <em>world</em></h1><p>Inline <strong>spacing</strong> matters.</p><pre>keep these
spaces</pre></main><script>const greet=()=>console.log("hello");</script></body></html>The formatter tokenizes markup and applies consistent indentation, line breaks, wrapping, and optional embedded-code formatting. It improves readability; it does not make invalid HTML valid or recover the author's original layout.
The minifier parses HTML and applies only the enabled transformations. Conservative mode retains optional syntax and attribute quotes. Maximum mode enables more HTML5-aware reductions and embedded CSS/JavaScript processing, so it needs broader testing.
Indentation and wrapping affect readable output. Minification switches control comments, collapsible whitespace, optional tags, quotes, default attributes, boolean syntax, attribute order, and embedded CSS/JavaScript. Each interface option explains its own tradeoff.
Text content, doctypes, tag structure, and attribute values are retained unless a selected minification rule explicitly permits a change. pre and textarea content is treated as preformatted. Conditional comments and common template fragments are protected when their options apply.
Format HTML before reading, reviewing, debugging, or editing it. Minify a tested copy for delivery to browsers. Keep the readable source separately; minified output is a build artifact, not a replacement for source control.
Use a project build pipeline when output must be reproducible, tested automatically, source-mapped, processed in batches, or integrated with framework compilation. This browser tool is best for inspection, experiments, one-off files, and comparing settings.
Processing engines: minification uses html-minifier-terser 7.2.0; formatting uses js-beautify 2.0.3; feedback uses HTMLHint 1.9.2; and the enhanced editor uses CodeMirror 5.65.21. These pinned libraries download from jsDelivr or cdnjs, then transformations run locally.
Important limits: whitespace can be meaningful around inline elements. Minification is not validation. Beautification cannot reconstruct removed comments or original formatting. Malformed markup may be rejected or produce unexpected output. Retest email templates, framework syntax, and any production-critical result.
script and style: contents are preserved unless embedded formatting or minification is enabled.pre and textarea: preformatted contents are preserved by the processing engines.code: the formatter keeps its content unformatted, but a standalone code element still follows normal HTML whitespace rules during minification; wrap whitespace-sensitive code in pre.{{...}}, {%...%}, <%...%>, and [[...]] fragments are protected during minification. Framework-specific syntax can differ and must be tested.The preview has an empty iframe sandbox and an injected Content Security Policy. It disables scripts, forms, navigation, frames, and external network resources; only inline styles and data/blob media are allowed. It is a visual aid, not a security scanner or full browser-equivalence test.
Formatter and beautifier usually mean the same thing: they add consistent indentation and line breaks for people to read. A minifier removes safe-to-remove bytes for delivery. Formatting generally increases size; minification generally reduces it.
Only when you enable the embedded CSS and JavaScript option for the selected mode. Leave it off to keep script and style contents unchanged as far as that engine permits. Always test generated code.
No. A formatter can make minified markup readable, but it cannot reconstruct removed comments, optional tags, attribute quotes, or the author's original spacing and line breaks. Keep the source file in version control.
Yes. Whitespace can be meaningful between inline elements, in preformatted content, in templates, and in some email layouts. Conservative mode reduces risk but does not remove the need to test the output.
HTMLHint reports likely problems with line and column locations, and the processing engines may reject or reinterpret malformed input. The tool does not claim to repair markup automatically.
The engines handle common HTML5 and inline SVG markup. Common Mustache, Liquid, ERB, and double-bracket template fragments are protected during minification, but framework syntax varies and must be retested. SVG case is preserved.
There is no upload limit because processing is local. Performance depends on the device and browser; files above 2 MB trigger a warning, and about 5 MB is a sensible practical ceiling for this interactive page.
Formatting supports tabs or one to eight spaces per indentation level, optional line wrapping, and a configurable maximum line length from 40 to 500 characters.
Transformations run in the browser and this page does not transmit editor contents. Pinned processing and editor libraries are downloaded from jsDelivr and cdnjs, so those providers can receive ordinary page-resource request data, but not the HTML in the editor.
Autosave is on by default and stores input in this browser's localStorage. You can turn autosave off or select Clear saved input. Output is not autosaved.
Use Conservative mode and test every output in the email clients you support. Email layouts often depend on whitespace, conditional comments, table structure, and unusual attributes, so Maximum mode is not recommended without a full rendering test.
No. Parsing feedback is a useful lint check, not a standards-conformance guarantee, and minification is not validation. Use a dedicated validator and test the rendered result for production-critical markup.