htmz — a 176 bytes htmx alternative
- Published at
- Updated at
- Reading time
- 1min
htmx has been pretty loud lately because it moves functionality, like swapping out DOM elements into declarative HTML. Love it or hate it, I think it's a "fresh" approach to the overcomplicated world of JS frameworks.
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
Add the 14kb compressed file to your sites and create dynamic interactions. Everything's just a hx-whatever
attribute away. Sweet!
Could you do similar things with less JavaScript? And while I wouldn't recommend using htmz in production, it does some HTML-swapping magic with 176 JS bytes. How? With very creative iframe usage.
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>
<!-- Loads /flower.html onto #my-element -->
<a href="/flower.html#my-element" target=htmz>Flower</a>
Is the project a joke? Sorta — maybe not. But whether we talk about htmx or htmz or whatever comes next, it becomes clear that we're lacking some HTML primitives. But maybe frames were already good enough? #oldIsNew 😅
Join 5.4k readers and learn something new every week with Web Weekly.