- Migration from XMLHttpRequest to the native fetch() API for better performance and streaming capabilities.
- Shift towards explicit attribute inheritance and a standardized event naming convention.
- Introduction of morph swaps and the hx-partial tag for complex DOM updates.
- Overhaul of history management by replacing local snapshots with real server requests.
If you’ve been hanging around the web development scene for a bit, you probably know that htmx is basically a magic trick for your HTML. It lets you do things that usually require a massive JavaScript framework—like updating a page without a full reload—just by adding a few attributes to your tags. The release of htmx 4 is a big deal because it doesn’t just add a few bells and whistles; it essentially rewires the engine to make your apps feel snappier and way more reliable.
The core philosophy remains the same: keep the logic on the server and use Hypertext As The Engine Of Application State (HATEOAS). Instead of swapping JSON back and forth, htmx 4 asks the server for HTML fragments and plugs them right into the DOM. It’s a breath of fresh air for anyone tired of the complexity of modern frontend tooling, focusing on locality of behavior so you can actually understand what your code does just by looking at the HTML.
The Great Fetch()ening
The most significant internal change is that htmx has finally ditched XMLHttpRequest in favor of the native fetch() API. While this might seem like a boring under-the-hood detail, it’s actually a game-changer. Using fetch makes the library leaner and opens the door for advanced streaming HTML. However, this means XHR-specific events are gone, and you’ll notice that request timeouts now default to 60 seconds instead of hanging indefinitely.
Breaking the Inheritance Habit
One of the biggest hurdles when moving from version 2 to 4 is how attributes are passed down to child elements. In the past, inheritance was implicit—if you put a confirmation dialog on a div, every button inside it got that dialog. Now, you have to be explicit by adding the :inherited modifier to the attribute. For example, using hx-confirm:inherited tells htmx that this behavior should flow down the DOM tree. This stops that annoying “action at a distance” feeling and makes debugging your UI a whole lot easier.
Smarter Swaps and Multi-Targeting
Swapping content is where htmx really shines, and version 4 introduces Morph Swaps (innerMorph and outerMorph). Instead of just ripping out a piece of the page and slamming in new HTML, morphing uses the idiomorph algorithm to merge changes. This is a lifesaver for preserving input focus or keeping a video playing while the rest of the content updates. Additionally, the new <hx-partial> tag allows a single server response to update multiple different parts of the page, giving you more control than the old out-of-band (OOB) swaps.
Handling Errors and History
In previous versions, htmx would often ignore 400 or 500 error responses. Not anymore. htmx 4 swaps error responses by default, which is awesome for showing server-side validation errors. To manage this, you can use the hx-status attribute to route specific codes (like a 422) to a dedicated error div. Regarding history, the library has stopped taking DOM snapshots in localStorage. Now, when a user hits the back button, htmx simply re-fetches the page from the server, ensuring the state is always fresh and not a stale ghost of a previous session.
Events, Extensions, and Scripting
The event system has been totally cleaned up to follow a htmx:phase:action pattern. This consistency makes it much easier to hook into the lifecycle of a request. On the extension front, we now have first-class support for SSE (Server-Sent Events), WebSockets, and multipart/mixed responses, making real-time dashboards a breeze to build. For those who need a bit of client-side reactivity, hx-live offers a DOM-based scripting solution that feels like a mix of Alpine.js and jQuery, allowing you to manipulate elements with a simple q() selector.
Installation and Upgrade Path
If you are starting a fresh project, just grab the latest version 4 via CDN or NPM. For existing apps, the team has provided a command-line upgrade tool (via npx) that scans your templates for deprecated attributes and old event names. If you’re not ready for a full leap, the htmx-2-compat extension can restore old behaviors temporarily. It’s worth noting that version 2 remains supported and will stay the ‘latest’ tag on NPM until early 2027 to prevent accidentally breaking millions of sites that use non-versioned CDN links.
Security and Best Practices
Since htmx lets you inject HTML directly, escaping user content is non-negotiable to prevent XSS attacks. The hx-ignore attribute is a great tool here; it tells htmx to completely skip processing any attributes inside a specific container, which is perfect for rendering raw user-generated content safely. For high-security environments, the hx-csp extension helps integrate with strict Content Security Policies by managing nonces and limiting where requests can be sent.
This evolution of htmx transforms the library from a clever utility into a robust foundation for long-term web services. By embracing the fetch API, clarifying how attributes are inherited, and introducing sophisticated morphing and partial updates, it removes the friction between the server and the browser. Whether you are building a simple CRUD app or a complex real-time interface, the combination of a simplified event system and powerful streaming extensions makes it easier than ever to create dynamic experiences without leaving the comfort of HTML.
