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 😅

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 10 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles