logo
Kurashizu Blogwhere ideas flow
  • Home
  • News
  • Blog
  • About
  • Home
  • News
  • Blog
  • About

© 2026 Kurashizu. All rights reserved.

Admin·New Post·Service Status
Powered by Cloudflare·31.10.26
← Back to news

Htmx 4.0

Original article
four.htmx.org|761 points|191 comments|by rmsaksida|Aug 28, 2026

🚀 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 XMLHttpRequest to ensure maximum backwards compatibility. However, a conversation with Christian regarding streaming HTML sparked the realization that migrating the internal engine to fetch() 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 lim⁡t→100Web Service\lim_{t \to 100} \text{Web Service}limt→100​Web Service, 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.

  • latest →\rightarrow→ htmx 4.0 →\rightarrow→ Incorrect
  • latest →\rightarrow→ htmx 2.x (Remains the default)
  • next →\rightarrow→ htmx 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:beforeRequesthtmx:before:request
htmx:afterRequesthtmx:after:request
htmx:beforeSwaphtmx:before:swap
htmx:afterSwaphtmx:after:swap
htmx:configRequesthtmx: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-on attributes and JS listeners to the new event naming convention.
  • Replace localStorage history logic with the hx-history-cache extension if necessary.
  • Verify that native browser validation replaces any custom htmx:validation logic.

Event Logic Flow

htmx 4.0 Logo Placeholder

For more details, refer to the llms.txt or llms-full.txt documentation files.