HTMX

HTMX is the secret sauce that makes it possible to code up a basic Web 1.0 site with modern interactivity. It's a very small (10K gzipped) library which allows us to add simple custom attributes to our markup so that actions on elements can trigger server-interaction without a full page refresh.

<button hx-get="/replace-this-button" />

In this example, a click event (the default trigger for a button element) will fire an HTTP GET request to the path /replace-this-button and will render the response (by default) to the inner HTML of this element. All with no page refresh.

Using other trigger events

You can use any standard (or custom) event to trigger an action.

<div hx-trigger="mouseenter" hx-get="/replace-this-div" />

Updating other elements

The response can be rendered to any target on the page by specifying the target as a CSS selector.

<button hx-get="/get-sidebar-content" hx-target="#sidebar"

Using other HTTP methods

Of course, you aren't limited to just get requests.

<span hx-trigger="click" hx-delete="/delete-this-thing" />

Using hx-boost

For standard page navigation events like clicking on an anchor link or submitting a form, HTMX provides a very helpful hx-boost attribute which causes all descendent anchor tags and forms to behave in a more "SPA-like" manner. Rather than refreshing the entire page, only the body element of the page is swapped out. This means that any scripts or CSS that were previously loaded will remain intact. This not only improves performance since the entire DOM doesn't need to torn down and rebuilt for every page request, it also means that any client-side JS state which might exist will also remain intact. As an added bonus, if a new title tag exists in the response, it will be dynamically updated.

The boilerplate layout has body tag sets hx-boost="true" and hx-swap="outerHTML" so that the response will replace the target element rather than just its inner content.

Learn more about HTMX here:
https://htmx.org/