Skip to content

htmz: Dynamic Applications Without a <script> Tag

Published: at 05:56 PM

htmz is an experiment that distills the concepts of htmx into a single HTML snippet

All it takes is one snippet: (for clarity, I’ve added whitespace)

    setTimeout(() => {
      document.querySelector(contentWindow.location.hash || null)?

htmz example

How do you use it?

How does it work?

  1. The target attribute causes the browser to load the linked page or form result page into the hidden iframe
  2. The iframe has a simple onload handler that replaces the target element’s contents with the DOM nodes from that hidden iframe
  3. Any time the iframe loads new content, the process is repeated

What can you do with it?


Well, htmz provides the essence of htmx without custom HTML attributes, without a DSL and without custom elements. It requires no script tag; just the <iframe> snippet above. It takes advantage of HTML standards to manage dynamic content without writing JavaScript.

Coming from the headspace of daily driving Remix, I look at htmz and think, yes, I love the thought of using HTML standards as the backbone of your application. It’s a neat experiment!

View the htmz documentation.