v1.9.4 Minify HTML mixed with anything
Dark mode:


HTML-Crush is an Email Template-oriented minifier, differently from Web Page-oriented minifiers. While it will compress Web Pages fine too (albeit not as efficiently) but Web Page minifiers might break your email templates.

<td class="{% if count < 10 %}few{% else %}many{% endif %}>"

Usually, a random unescaped HTML raw brackets < and > will break some minifiers. But not HTML-Crush.

It's because HTML-Crush does not parse the HTML — it treats its input as text (which may or may not be HTML).

If your email template file size is approaching 80KB (around 80,000 characters in total if you select all in your code editor), you must use a minifier.

Email Minifying Peculiarities

Email Templates require a different minification compared to Web Pages:

While you can get away with non-minified website HTML, minifying is crucial for Email Templates because Gmail truncates emails somewhere between 80KB and 100KB and also on certain special unencoded characters outside ASCII range.

HTML-Crush is used in production by some big UK brands, but we won't name-drop.

Differently from Web Page minifiers, HTML-Crush adds extra line breaks in certain places to cater Outlook

The Algorithm

The principle of our algorithm is quite simple — delete all whitespace between certain characters, for example, closing bracket > and opening bracket <. There is more logic (to tend CSS code, to limit line length, to ensure against false positives and so on) but this is the main principle how this minifier works.

It is very wise to decouple the core of a web application from its front-end UI. This way, the core can be unit-tested separately, and other "consumers" can be plugged into it as well:


This "core API" is our npm package, html-crush, and this website is using it.

Differences between html-crush (by Codsen) and html-minifier (by Kangax):

Here are differences between html-crush and a popular Kangax html-minifier:

html-crush by Codsen Kangax html-minifier
Typical market Email templates Web pages
Strengths Can minify HTML mixed with anything Compresses to the maximum
On npm NPM NPM
Weaknesses Can't detect if an input code is broken Overwhelming amount of options, some of them risky
Priority Mixed or dirty sources support at the expense of maximum compression Maximum compression at the expense of mixed or dirty sources support
When the input contains a code error... Minifier will not complain about it and minify it Minifier will throw an error, and you will not get any result at all

PS. You can't make html-crush to throw an error. It's impossible. It will always minify whatever you give to it.


Is the code I paste into this application safe?

Yes, because there is no back-end — your code never leaves your browser. This application is a bunch of static HTML, CSS and JS files, served through a secure HTTPS connection. Feel free to inspect the sources.

What framework is this website using?

We use vanilla JS, Markdown, Gulp and Nunjucks to generate a static file structure.

Why are you not using Svelte/React/VueJs/Angular here?

It would be an overkill for a simple web app like this.

How did you achieve the "loading" and why is UI responsive even while the result is being calculated?

We spin up a web worker on a separate thread.

How does this website "remember" all the settings and input even after closing and reopening the browser window?

We save all settings, toggles and input content on local storage, window.localStorage.

Are there any guarantees about this web application?

While we took utmost care to ensure there are no bugs, we can't guarantee anything: correctness, availability or whatever.

I want to report a bug, what do I do?

If it's an issue with this website, email roy@codsen.com.

If it's an API problem (calculations are wrong), ideally, raise an issue directly on html-crush issues page on our monorepo at GitLab.

Why is the html-crush library not on GitHub?

Because GitHub sold us out to Microsoft and we moved out.

Who is the owner of this website?

Codsen Ltd.