htmx 4.0.0 Arrives with Fetch API Internals, Idiomorph Integration, and Partial Swaps
htmx 4.0.0 shifts core request handling from XMLHttpRequest to the Fetch API and introduces explicit attribute inheritance. It also bakes in morphing DOM swaps and the new hx-partial element for granular out-of-band updates.
Impact: High
Why it matters
You can upgrade web apps to faster fetch-based DOM swapping while auditing attribute inheritance using the official CLI tool.
TL;DR
- 01htmx 4.0.0 migrates internal HTTP calls from XHR to fetch().
- 02Attribute inheritance now requires explicit :inherited modifiers.
- 03Run npx htmx.org@4.0.0 upgrade-check to scan templates for breaking changes.
Key facts
- Release Version
- 4.0.0
- Development Time
- 8 months
- NPM Default Tag
- 2.x remains latest; 4.0.0 is next until 2027
- HTTP Transport Engine
- fetch() API (replaced XMLHttpRequest)
Fetch Core and Explicit Inheritance
htmx 4.0.0 replaces XMLHttpRequest with fetch(). The most significant breaking change is that attributes no longer cascade to child elements by default. To preserve parent-child inheritance, append :inherited to the attribute name, such as hx-confirm:inherited="Are you sure?".
Improved History and Native Morphing
History restoration now avoids localStorage DOM snapshots, which previously corrupted state when used alongside third-party JavaScript libraries. On back navigation, htmx re-fetches the page and swaps it into <body> or [hx-history-elt]. Morphing DOM swaps are now built-in using an improved idiomorph algorithm, and the <hx-partial> tag enables targetable out-of-band updates.
Migration CLI Tool
To assist with upgrading, the team provides an automated checker to locate implicit attribute inheritance and legacy event names: npx htmx.org@4.0.0 upgrade-check -- ./templates
Try it in 2 minutes
npx htmx.org@4.0.0 upgrade-check -- ./templatesbash
✓ When to use
- Building hypermedia-driven web applications with modern backend frameworks
- Upgrading existing htmx 2.x apps using automated CLI audit tools
- Needing out-of-the-box DOM morphing and granular OOB updates
✕ When NOT to use
- Single Page Applications requiring complex client-side state management
- Projects unable to modify existing templates to fix attribute inheritance
What to do today
- Run npx htmx.org@4.0.0 upgrade-check on project template folders.
- Append :inherited to hx-confirm, hx-target, or hx-headers used on parent elements.
- Replace legacy htmx:xhr events with fetch-compatible event handlers.
Sources