htmz — a 176 bytes htmx various

htmx has been fairly loud these days as a result of it strikes performance, like swapping out DOM parts into declarative HTML. Adore it or hate it, I believe it is a “contemporary” strategy to the overcomplicated world of JS frameworks.

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

<button hx-post="/clicked" hx-swap="outerHTML">
  Click on Me
</button>

Add the 14kb compressed file to your websites and create dynamic interactions. Every little thing’s only a hx-whatever attribute away. Candy!

May you do comparable issues with much less JavaScript? And whereas I would not suggest utilizing htmz in manufacturing, it does some HTML-swapping magic with 176 JS bytes. How? With very inventive iframe utilization.

<iframe hidden identify=htmz onload="setTimeout(()=>doc.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.physique.childNodes))"></iframe>


<a href="/flower.html#my-element" goal=htmz>Flower</a>

Is the mission a joke? Sorta — possibly not. However whether or not we speak about htmx or htmz or no matter comes subsequent, it turns into clear that we’re missing some HTML primitives. However possibly frames have been already ok? #oldIsNew 😅