Htmx 4.0.0
The htmx team is very happy to announce the release of htmx 4.0.0! This is the culmination of 8 months of work (plus a game) and we are very happy with the results.
The idea of htmx 4 started to germinate when I decided to create fixi and, in doing so, got more familiar with the fetch() API and async programming in JavaScript. (htmx had always used XMLHttpRequest due to backwards compatibility issues.)
One chance evening I was contacted by Christian, who had some interesting ideas around streaming HTML that got me thinking that moving the internals to fetch() would simplify things for him and for the library in general. After a bit of work I managed to get Michael and Alex on board, and we were off to the races.
Development has been very smooth. We started a port of fixi + the htmx test suite. Over time, we rediscovered why htmx did many of the things that it did and moved our new implementation closer and closer to the old one. At this point the behavioral differences between 2.x and 4.x are relatively small and where they do diverge we have made explicit choices that we feel will put htmx-based applications in a good spot for being 100-year web services
Note that we are not marking 4.0 as latest in NPM because we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 2.x will remain latest and the 4.0 line will remain next until some point in early 2027. The website, however, will reference 4.0.
As mentioned above, htmx 4, from a users viewpoint, is almost identical to htmx 2. There are three major changes:
Internally, we migrated from XMLHttpRequest to fetch() but that should be transparent for most users of htmx.
In htmx 2 many attributes where “inherited” by default. This allows you to place attributes on parent elements and their behavior will apply to child elements. This behavior, which came from the intercooler.js days, was inspired by CSS and, unsurprisingly, worked out about the same as CSS: powerful but difficult to understand at times.
In htmx 4 attributes are not inherited unless you explicitly say so by adding an :inherited after the attribute name:
This will be the largest upgrade burden in migrating from htmx 2 to htmx 4. To make things easier, we have provided a command line tool to find places you need to mark as inherited.
Note that attributes like hx-disinherit, etc. are no longer required and should be removed.
The events triggered by htmx 2 had grown organically over the life of the librar and were not particuarly well organized, making it difficult to know exactly which event was fired when.
In htmx 4, all events now follow htmx:phase:action[:sub-action]:
In addition, the following changes were made:
The full table is in What’s New in htmx 4.
The command line upgrade checker flags old event names in hx-on attributes and in your JavaScript where it can find them.
History support has always been included in htmx, allowing you to implement back-button aware actions with simple attributes. In htmx 2, a cache in localStorage was used to snapshot pages for restoration. Unfortunately a large source of issues was that this snapshot could include DOM mutations by 3rd party JavaScript libraries. When the page was restored, those mutations remained by the underlying JavaScript logic was not.
htmx 4 does not cache pages in localStorage. On back navigation htmx re-fetches the page and swaps it into , or into the [hx-history-elt] element if one is present. This allows 3rd party JavaScript libraries to “just work” in most cases and, with good request caching, is very fast.
If you want local caching instead, we now ship a very complete hx-history-cache extension restores history from sessionStorage and is designed to integrate well with scripting solutions like Alpine.js, etc.
There are two big new features in htmx 4, both of which we are really excited about:
We now support morphing swaps out of the box with htmx. I created idiomorph and nearly included it in htmx 2.x but decided against it. In htmx 4, Michael has done great work improving on that algorithm and integrating it seamlessly into htmx.
Another major new feature is the
Much of the excitement in htmx 4 is in the extensions. Switching to fetch() internally let us rethink how extensions can and should work, and sparked the creation (and recreation) of many new extensions, for example:
Additionally, there are three new or updated streaming HTML extensions:
Finally, we decided it was time to try our hand at our own small front-end scripting solution that tightly integrates with htmx. hx-live is inspired by Alpine.js, jQuery and hyperscript, and makes front end scripting pleasant and fun. It even supports what we are calling DOM-based, HATEOAS-friendly reactivity.
There is a new htmax.js bundle in the distribution which packages htmx with the most popular of these in a single file if you don’t want to think about which ones you want to pick.
For a complete upgrade guide see What’s New in htmx 4.
As mentioned earlier, we are providing an upgrade tool to help you:
We are also shipping an agent skill to assist in upgrading
htmx 4.0 can be installed via a package manager referencing version 4.0.0, or can be linked via a CDN:
Like it or not, a lot of people are using LLMs and we are providing the following skills files for LLMs:
(Let’s leave aside if releasing a new version of a library in the LLM era is a good or bad thing!)
We hope you enjoy htmx 4. htmx 2 will continue to be supported indefinitely so don’t feel any pressure to upgrade.
I’d like to thank the following people for all their help with this release:
Wouldn’t be an htmx update without upgrade music:
Try a different search term