htmz: Dynamic Applications Without a <script> Tag

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)

<iframe
  hidden
  name="htmz"
  onload="
    setTimeout(() => {
      document.querySelector(contentWindow.location.hash || null)?
        .replaceWith(...contentDocument.body.childNodes)
    })
  "
></iframe>

How do you use it?

• Add the snippet somewhere in your document
• For forms, add a hash to the end of the action and set the target to “htmz”
• For links, add a hash to the end of the href and set the target to “htmz”
• Expect the server to return html
• The returned HTML is placed in the element with the id matching the hash given above

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?

• Load HTML dynamically based on a link or form. Think detail panes, tabs, and modals.
• Show an edit link or button that gets replaced with a form. Then after submitting the form, the form is replaced with the original edit link.
• Chat without ajax/fetch.

Why?

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.