htmx 4.0: Fetch API, Morphing Swaps, and Explicit Inheritance

htmx 4.0: Modernizing Hypermedia

The release of htmx 4.0.0 marks a substantial evolution for the hypermedia library, with the shift to the fetch() API being a particularly impactful change. This move not only modernizes the underlying transport mechanism but also unlocks advanced capabilities like native streaming, which can significantly improve perceived performance and user experience, especially for applications dealing with large data payloads or real-time updates. The introduction of built-in morphing swaps, powered by idiomorph, is a game-changer for maintaining DOM state during updates. This feature addresses a common pain point in dynamic web development, where focus loss and scroll position disruptions can lead to a jarring user experience. Explicit attribute inheritance with the :inherited suffix is a well-intentioned, albeit potentially disruptive, change. While it brings clarity and control, it necessitates careful review of existing codebases to avoid unexpected breakages, as highlighted by the hx-headers example for CSRF tokens. The standardization of event names and the change in history snapshotting also contribute to a more robust and predictable library, especially for third-party script integration.

The primary benefit of htmx 4.0 accrues to web developers seeking to build dynamic, interactive user interfaces with minimal JavaScript. This is particularly relevant for those working with server-rendered architectures (like Django, Go, Rails) who want to leverage hypermedia principles. The library's core philosophy of keeping complexity on the server and enhancing HTML with attributes aligns perfectly with this goal. The improvements in htmx 4.0 make this approach even more viable and powerful. The explicit inheritance, while requiring migration effort, ultimately leads to more maintainable and understandable code by making attribute propagation explicit. The refetching for history snapshots simplifies integration with external scripts, a common issue with DOM-snapshotting approaches. The command-line checker provided is a crucial tool for developers undertaking the upgrade, mitigating potential risks. However, the inherent nature of such a significant rewrite means that existing projects will require careful migration planning and testing to fully benefit from the new features and avoid the pitfalls of implicit attribute behavior changes.

Key Points

• htmx 4.0 replaces XMLHttpRequest with the modern fetch() API, enabling native streaming and maintaining a small footprint (~14KB).
• Introduces built-in morphing swaps powered by idiomorph, which preserve DOM state like input focus during updates.
• Adds the hx-partial tag for updating multiple targets from a single response, a cleaner alternative to out-of-band swaps.
• Attribute inheritance is now explicit, requiring the :inherited suffix for parent attributes to reach children, a change that demands careful migration.
• Event names are standardized to a htmx:phase:action pattern (e.g., htmx:after:request).
• History no longer snapshots the DOM to localStorage; it refetches pages, improving third-party script compatibility.
• A command-line checker (npx htmx.org@4.0.0 upgrade-check) is provided to assist with migration, flagging inheritance issues, renamed attributes, and old events.
• New features include a 60-second request timeout and attribute renames like hx-disable to hx-ignore.
• htmx 4.0 is available under the next npm tag, with 2.x remaining supported indefinitely.

---

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