Minifying and formatting code are mirror operations. Format adds whitespace and newlines so humans can read the structure; minify removes them so machines can transfer fewer bytes. Most code lives in both forms at different times — formatted in the editor, minified in the deployed bundle.
This tool handles HTML, CSS, and JavaScript in your browser. Each language has its own tokeniser tuned to what’s safe to remove and what must be preserved. The implementations are honest about scope: HTML and CSS get full format-and-minify; JavaScript gets a credible whitespace-and-comment minifier and a clear pointer to prettier.io for proper formatting.
What HTML formatting and minification do
Format indents nested elements consistently, with one element per line for block-level tags and inline phrasing kept on the same line as their parent (so <p>hello <strong>world</strong></p> stays on one line). <pre>, <textarea>, <script>, and <style> content is preserved verbatim — formatting them would break their semantics.
Minify drops HTML comments entirely, collapses whitespace between tags, and collapses runs of whitespace inside text content to a single space. Preserved elements (script, style, pre, textarea) are left alone. The output parses identically to the source.
What CSS formatting and minification do
Format indents declarations one per line, normalises spacing around colons (color:red becomes color: red), and pretty-prints @media, @supports, @keyframes blocks with their inner rules indented further.
Minify drops /* ... */ comments, removes whitespace inside selectors (a > b becomes a>b), removes whitespace around colons and semicolons, drops the trailing semicolon in each rule, and collapses whitespace runs to nothing.
What JS minification does (and doesn’t)
Minify drops // line and /* */ block comments, then collapses whitespace using a state-machine tokeniser. The tokeniser preserves string literals, template literals (including the contents of ${...} expressions verbatim), and regex literals. The regex-vs-division heuristic uses the standard preceding-token rule (regex is allowed after =, (, [, ,, ;, {, !, &, |, ?, :, return, typeof, in, of, delete, void, instanceof, new).
What the JS minifier does NOT do:
- AST-level transforms (no variable renaming, dead-code elimination, property mangling)
- Tree-shaking
- Module bundling
- Format JS — the formatter button shows an error pointing at prettier.io
For production-grade JS minification, use terser. This tool is for quick whitespace + comment cleanup of small snippets.
Example: minifying a CSS rule for production
Source:
.button {
background: #007bff;
color: white;
padding: 0.5rem 1rem;
border: 1px solid #0056b3;
border-radius: 4px;
}Minified:
.button{background:#007bff;color:white;padding:0.5rem 1rem;border:1px solid #0056b3;border-radius:4px}About 30% smaller. For a stylesheet of 1000 such rules, that’s a meaningful download saving.
Example: formatting a minified HTML email template
You inherited a minified HTML email blob from a marketing tool — one giant line, impossible to inspect. Switch to HTML, format, paste. The tool indents the table-based layout, makes nesting visible, and preserves the inline styles and image references untouched.
Example: cleaning up an unminified script for inline use
You have a small JS snippet you want to inline in a script tag. Switch to JS, minify, copy. Paste into the <script> block. About a 20-30% size reduction for typical hand-written code (the savings come from comments and indentation; production code that’s already squashed sees less).
Common mistakes
Trying to minify TypeScript with the JS mode. The JS tokeniser only handles JavaScript syntax. TypeScript’s type annotations (: string, <T>, as Foo) will confuse it. Compile to JS first.
Minifying CSS that uses @import. The minifier preserves @import lines correctly, but the imported file isn’t bundled. Production builds usually want @imports resolved before minification.
Expecting the JS minifier to rename variables. It doesn’t — only whitespace and comments. If you need shorter variable names in your output, you need terser or a similar AST-based minifier.
Pasting unbalanced HTML and being surprised by the formatter’s output. The HTML tokeniser is lenient — it’ll do its best with malformed input but the result may surprise you (e.g. a missing close tag causes the rest of the document to nest under the open tag). Validate first if your HTML might be broken.
What this tool does not do
It does not bundle modules. ES modules with import / export aren’t tree-shaken or combined.
It does not transpile. ES2022+ features pass through to the output as-is; if your target needs ES5, run Babel first.
It does not handle non-CSS preprocessors. SCSS, LESS, and Stylus syntax will confuse the CSS tokeniser. Build first, minify here.
It does not validate syntax. Garbage HTML/CSS/JS produces best-effort output; parse failures don’t always surface as errors. For pattern-based find/replace across the formatted output, the regex tester runs a rule you can verify before applying it at scale.