htmz — a 176 bytes htmx alternative

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 😅