Abstract:

This video covers the announcement of HTMX version 4, which is currently in alpha. The primary internal change is the migration from XMLHttpRequest to the Fetch API for handling AJAX requests. This enables new and returning features like core support for streaming responses, server-sent events, and improved DOM morphing via idiomorph.

The video outlines several breaking changes, including the requirement for explicit attribute inheritance and the removal of local DOM history snapshotting in favor of network requests for restored content. The core takeaway is the introduction of the <hx-partial> tag, a new, more explicit mechanism for updating multiple, disparate sections of the DOM from a single server response. This is presented as a cleaner alternative to the previous "out-of-band" swap system. A practical example demonstrates replacing an hx-swap-oob implementation with the new <hx-partial> tag to update both a list and a related counter simultaneously. As far as I can tell, the video is a competent, if basic, introduction to these changes.

HTMX v4: Key Changes and the New <hx-partial> Tag

• 0:00:02 The "Fetchening": HTMX announced a move from version 2 to version 4. The biggest change is replacing the XMLHttpRequest object with the more modern Fetch API for AJAX requests. This is an internal change and shouldn't affect most users directly.
• 0:01:22 Breaking Changes:
  • Explicit Inheritance: Attributes are no longer inherited by child elements implicitly. The inherited modifier must be added to an attribute (e.g., hx-target="... inherited") for it to apply to children. This is a good change, as implicit behavior is often a source of bugs.
  • No Local History: HTMX will no longer snapshot the DOM for history. Instead, it will issue a network request to restore content, simplifying the codebase.
• 0:02:51 What Stays the Same: Most core functionality remains unchanged. Version 2 will supposedly be supported "in perpetuity," which probably just means for the foreseeable future. Migration should be manageable.
• 0:03:16 New Core Features:
  • Streaming & SSE: Support for streaming responses and Server-Sent Events (SSE) returns to the core library, enabled by Fetch's support for readable streams.
  • Morphing Swap: The idiomorph algorithm is now in core, offering a smarter way to merge DOM changes. I don't care much about the specific algorithm, only that it works.
• 0:04:34 The <hx-partial> Tag: This is the video's main focus. It's a new, more explicit alternative to out-of-band (oob) swaps for updating multiple elements from one response.
• 0:07:22 Practical Example - The Problem: A form adds a language to a list. The hx-post targets the list, but a separate counter on the page needs to be updated simultaneously.
• 0:09:10 Old Solution - Out-of-Band Swaps: The server response includes the main content (the new list item) plus a separate element with the hx-swap-oob="true" attribute and a matching ID to the counter on the page, forcing HTMX to swap it in.
• 0:10:49 New Solution - Using <hx-partial>: The server response is wrapped in multiple <hx-partial> tags. Each tag can have its own hx-target and hx-swap attributes, explicitly defining where each piece of content should go and how it should be swapped. This is clearly a more robust and less ambiguous system.
• 0:13:47 When to Not Use HTMX: The video correctly notes that if your UI has too many interdependent state updates, you should probably be using a more complex framework like React instead of trying to force HTMX to do something it wasn't designed for.