htmx 4.0 Released with Fetch-Based Rewrite, Morphing Swaps, and Explicit Attribute Inheritance

Major Architectural Shift

htmx 4.0.0, the first major version since 2024's 2.0 release, has been launched after eight months of development. The core change involves replacing the XMLHttpRequest transport with the modern fetch() API. This rewrite enables native streaming capabilities while maintaining a small script size of approximately 14KB.

New Features for DOM Manipulation

The transition to fetch() facilitates two key features: built-in morphing swaps, powered by idiomorph, which preserve DOM state like input focus during updates, and a new hx-partial tag. The hx-partial tag allows a single response to update multiple targets cleanly, offering an alternative to out-of-band swaps.

Changes to Attribute Inheritance and Events

Attribute inheritance is now explicit; parent attributes only apply to children when marked with an :inherited suffix. This change requires developers to update existing code, as attributes like hx-headers will silently fail without the suffix. Event names have also been standardized to a htmx:phase:action pattern, for example, htmx:afterRequest is now htmx:after:request. Additionally, history no longer snapshots the DOM into localStorage, instead refetching pages to ensure compatibility with third-party scripts.

Deployment and Migration Considerations

htmx 4.0 is available under npm's next tag, preventing automatic upgrades for unversioned CDN links and ensuring continued support for 2.x. The htmx team provides a command-line utility, npx htmx.org@4.0.0 upgrade-check, to help identify inheritance issues, renamed attributes, and old event patterns in existing templates. Other changes include a new 60-second request timeout and attribute renames, such as hx-disable becoming hx-ignore.