BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance

htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance

Listen to this article -  0:00

The htmx team has released htmx 4.0.0, the first major version of the hypermedia library since 2.0 arrived in 2024, landing after eight months of work and skipping version 3 entirely. Creator Carson Gross, who had promised there would never be an htmx 3, summed up the leap to InfoWorld in a one word quote: "Oops."

htmx has swapped its long serving XMLHttpRequest transport for the modern fetch() API, a rewrite that unlocks native streaming while keeping the script around 14KB. For most developers the familiar hx-get and hx-post attributes behave exactly as before, but the move enables the two features the team is most excited about, which is built in morphing swaps powered by idiomorph, which preserve DOM state such as input focus during updates, and a new hx-partial tag that lets one response cleanly update several targets, a tidier take on out of band swaps.

Attribute inheritance is now explicit, so parent attributes reach children only when marked with an :inherited suffix:

<div hx-confirm:inherited="Are you sure?">
 <button hx-delete="/item/1">Delete</button>
</div>

A detailed DEV Community write up warns this is the trap to watch, because an hx-headers attribute passing a CSRF token to child elements silently stops working without :inherited and the server begins rejecting requests with a 403 while nothing looks broken.

Event names have also been standardised to a htmx:phase:action pattern, so htmx:afterRequestbecomes htmx:after:request, and history no longer snapshots the DOM into localStorage, instead refetching pages so third party scripts just work.

A Hacker News thread passed 700 points, with developers praising the Go, SQLite and htmx stack and how well AI assistants handle it, one noting that Claude "understands it and does it well", and the r/htmx release post drew over 300 upvotes.

Elsewhere a .NET and Angular developer argued htmx forces you to mix presentation with business logic and another agreed and said their team is moving back to React.

htmx 4.0 ships under npm's next tag rather than latest, so nobody on an unversioned CDN link is force upgraded, and 2.x stays supported indefinitely. The team provides a command line checker that flags inheritance issues, renamed attributes and old events:

npx htmx.org@4.0.0 upgrade-check -- ./templates

Beyond inheritance changes, there is also a new 60 second request timeout and a number of attribute renames, such as hx-disable becoming hx-ignore. These changes need applying with care. A full What's New in htmx 4 guide is available, and dedicated skills files for LLM assisted upgrades.

htmx is an open source library that adds AJAX, CSS transitions, WebSockets and server sent events directly to HTML through attributes, letting developers build modern interfaces with minimal JavaScript. It remains a flagship of the hypermedia movement, popular with Django, Go and Rails backends where server rendered HTML meets low client side complexity.

About the Author

Rate this Article

Adoption
Style

BT