⚡ Testing Tip: Disable cache & throttle to "Slow 4G" in DevTools for realistic results
← Back to Library List

Stack Comparison: HTMX+Idiomorph+Alpine vs Datastar

Comparing unminified HTMX stack (3 libraries) against minified Datastar (all-in-one)

Why Compare Unminified vs Minified?

There's a claim in the developer community that minification "doesn't matter" and is "a wash" in real-world usage. This comparison directly challenges that assertion by showing the holistic real-world consequences of architectural and delivery decisions combined.

When HTMX is distributed unminified (as currently advocated), and you need to add Alpine.js and Idiomorph for a complete solution, you're looking at 305.3 KB (57.0 KB brotli) of JavaScript.

Compare this to Datastar — a single, minified library that provides similar functionality at just 39.1 KB (10.2 KB brotli). That's an 87.2% reduction in raw size and 82.1% reduction even with compression. This isn't just theory — it's measurable, real-world impact on load times, especially on mobile networks.

Size Comparison - Real Server, Real World Numbers

HTMX Stack (Unminified): 305.3 KB (57.0 KB brotli)

Datastar (Minified): 39.1 KB (10.2 KB brotli)

Size Reduction: 87.2% (82.1% brotli)

Library Details

HTMX Stack (Unminified):

  • HTMX: 161.8 KB (30.0 KB brotli)
  • Idiomorph: 36.5 KB (6.5 KB brotli)
  • Alpine.js: 107 KB (20.5 KB brotli)

Datastar (Minified): Single 39.1 KB file (10.2 KB brotli) with similar functionality

HTMX + Idiomorph + Alpine.js

Unminified versions

Load Time: -

Datastar

Minified all-in-one solution

Load Time: -

Test History

Test # HTMX Stack (ms) Datastar (ms) Difference (ms) Speed Multiple