Htmx 4.0
🚀 Htmx 4.0.0 Release Announcement
Release Date: August 28, 2026
The htmx development team is thrilled to officially unveil htmx 4.0.0! This milestone is the result of eight months of intensive development (and a bit of gaming on the side), and we are incredibly proud of the final product.
🛠️ The Genesis of Version 4
The seeds for htmx 4 were planted during the creation of fixi, which provided a deeper dive into the fetch() API and the nuances of asynchronous JavaScript programming.
Historically, htmx relied on
XMLHttpRequestto ensure maximum backwards compatibility. However, a conversation with Christian regarding streaming HTML sparked the realization that migrating the internal engine tofetch()would streamline the library and benefit the community.
With the support of Michael and Alex, the project accelerated. While the team spent significant time rediscovering the original logic behind htmx's design to ensure parity, they made deliberate choices to evolve the library. The goal is to ensure htmx-powered apps are built as , or essentially, 100-year web services.
📦 Deployment & NPM Strategy
To prevent breaking existing sites that rely on non-versioned CDN links, 4.0 is not currently marked as latest on NPM.
Incorrectlatesthtmx 4.0latesthtmx 2.x (Remains the default)nexthtmx 4.0 (Available for early adopters)
Note: The 4.0 line is expected to become the latest version in early 2027.
⚠️ Major Breaking Changes
While htmx 4 feels nearly identical to version 2 for the average user, there are three pivotal shifts:
1. Explicit Attribute Inheritance
In htmx 2, attributes were inherited implicitly (similar to CSS), meaning a parent's attribute would automatically apply to its children. While powerful, this was often confusing.
In htmx 4, inheritance is now explicit. You must append :inherited to the attribute name to maintain this behavior.
Comparison Example:
<!-- ❌ htmx 2: Implicit Inheritance -->
<div hx-confirm="Are you sure?">
<button hx-delete="/item/1">Delete</button>
</div>
<!-- ✅ htmx 4: Explicit Inheritance -->
<div hx-confirm:inherited="Are you sure?">
<button hx-delete="/item/1">Delete</button>
</div>
2. Standardized Event Naming
The event system has been reorganized from an organic growth pattern to a strict, predictable schema:
htmx:phase:action[:sub-action]
| htmx 2 (Old) | htmx 4 (New) |
|---|---|
htmx:beforeRequest | htmx:before:request |
htmx:afterRequest | htmx:after:request |
htmx:beforeSwap | htmx:before:swap |
htmx:afterSwap | htmx:after:swap |
htmx:configRequest | htmx:config:request |
Additional Event Updates:
- Most disparate error events are now consolidated into a single
htmx:error. htmx:validation:*events have been removed; htmx now leverages native browser form validation.
3. History Support Overhaul
Previously, htmx used localStorage to cache page snapshots. This caused significant issues when 3rd-party JS mutated the DOM, as the snapshot would save the mutation but not the underlying logic.
The New Approach:
On back-navigation, htmx now simply re-fetches the page and swaps it into <body> (or the designated [hx-history-elt]). This ensures 3rd-party scripts initialize correctly.
For those who still need local caching:
We have released the hx-history-cache extension, which utilizes sessionStorage and integrates seamlessly with tools like Alpine.js.
🌟 New Features
🧬 Morph Swaps
Morphing is now a first-class citizen. Building upon the foundations of idiomorph, Michael has refined the algorithm and integrated it directly into the core library for seamless DOM transitions.
🧩 The <hx-partial> Tag
We are introducing the <hx-partial> element, which functions similarly to out-of-band swaps... (content ends here).
🗺️ Migration Roadmap
If you are upgrading from 2.x to 4.x, follow this checklist:
- Run the CLI Upgrade Tool to identify implicit inheritance.
- Update
hx-onattributes and JS listeners to the new event naming convention. - Replace
localStoragehistory logic with thehx-history-cacheextension if necessary. - Verify that native browser validation replaces any custom
htmx:validationlogic.
Event Logic Flow
For more details, refer to the llms.txt or llms-full.txt documentation files.