htmx 4.0.0 was released on August 28, 2026, but it is not the NPM latest release: htmx 2.x remains tagged latest, while htmx 4 is tagged next. The project says it plans to keep those tags in place until some point in early 2027 so sites using non-versioned CDN URLs are not upgraded unexpectedly. So “not latest” describes the package tag, not whether htmx 4 has been released. The htmx project’s release announcement explains the decision.
Why htmx 4 is not tagged latest
NPM’s latest tag still points to htmx 2.x; htmx 4 is published under next. The project’s stated reason is to avoid unexpectedly moving sites that load htmx through non-versioned CDN URLs to a new major version. It says this arrangement is expected to continue until some point in early 2027. That is a release-channel choice, not evidence that htmx 4 is unreleased: version 4.0.0 was released on August 28, 2026. See the official announcement and the htmx project landing page.
As an Amazon Associate I earn from qualifying purchases.
What can break when moving from htmx 2 to htmx 4?
The migration documentation identifies three major behavioral changes: attribute inheritance, HTTP error-response swapping, and history restoration. Event names and the underlying request API also change, so JavaScript hooks deserve a separate audit. The htmx 4 documentation and change catalog are the references for application-specific details.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Attribute inheritance is explicit by default
In htmx 2, attributes were implicitly inherited by descendants by default. In htmx 4, inheritance is explicit by default. If a parent element is meant to pass an attribute to its descendants, use the documented :inherited form; :append can extend inherited values. If you need to stage a migration while preserving the old default, htmx 4 documents htmx.config.implicitInheritance as a compatibility setting. Check templates where behavior depends on attributes declared on an ancestor rather than on the element that triggers the request.
HTTP 400 and 500 responses swap by default
htmx 4 changes the default handling of HTTP 400 and 500 responses: those responses are swapped by default, unlike in htmx 2. This can expose server-generated error HTML in places where an application previously expected no swap. Review what the server returns for client and server errors, and test the resulting page behavior. The migration documentation describes htmx.config.noSwap for restoring the older no-swap behavior for statuses such as 204, 304, 4xx, and 5xx; configure it deliberately rather than assuming the old default still applies.
History restoration re-fetches from the server
In htmx 2, history restoration used a snapshot stored in localStorage. In htmx 4, navigating back or forward restores the page by fetching it from the server and swapping the response into the body or the configured history element. The project says this avoids restoring DOM mutations made by third-party libraries without their corresponding JavaScript state. The trade-off is that restoration now depends on a server response and may behave differently from returning to a locally cached DOM snapshot. Test browser back and forward navigation, especially on pages enhanced by third-party scripts. If local restoration is needed, the hx-history-cache extension provides a sessionStorage-based cache.
Event names and event coverage change
htmx 4 standardizes event names into the pattern htmx:phase:action[:sub-action]. For example, htmx:beforeRequest becomes htmx:before:request, htmx:afterRequest becomes htmx:after:request, and htmx:configRequest becomes htmx:config:request.
Free tools Windows power users keep installed
One-click scans. No signup required.
The release notes also say most error events collapse into htmx:error, HTTP response errors use htmx:response:error, htmx:xhr:* events are removed, and validation events give way to native browser form validation. Search JavaScript listeners and hx-on attributes for old event names, then test the flows those handlers support.
Requests use fetch instead of XMLHttpRequest
htmx 4 replaces XMLHttpRequest with the native fetch() API, and the project says this switch cannot be reverted. It should be transparent for most users, but application code tied to XHR-specific mechanics or hooks needs focused review. In particular, do not rely on removed htmx:xhr:* events.
What is new in htmx 4?
New attributes and extensions
The official change catalog lists new attributes including hx-action, hx-method, hx-query, hx-config, hx-ignore, and hx-validate. It also lists extensions including hx-multipart, hx-live, hx-targets, hx-ptag, hx-csp, hx-download, hx-prompt, and hx-history-cache. The SSE and WebSocket extensions have been significantly rewritten. Treat extensions and custom integrations as migration surfaces: check their htmx 4 documentation rather than assuming their htmx 2 behavior is unchanged. The official change catalog describes these additions.
hx-live and migration tooling
The release announcement describes hx-live as a new front-end scripting solution inspired by Alpine.js, jQuery, and hyperscript. The project also provides an upgrade checker that scans templates and JavaScript for some obsolete attributes, event names, and APIs. Its findings are a starting point, not proof that an application is compatible: it cannot replace tests of server responses, navigation, event-driven code, and extension behavior.
Updated show and scroll syntax
For hx-swap, the combined selector:position form for show and scroll is no longer supported. Use separate modifiers, such as show:top showTarget:#other or scroll:bottom scrollTarget:#other, as documented in the htmx 4 change catalog.
Best Value
A practical htmx 2-to-4 migration sequence
- Pin the version you intend to run. Use a versioned package or CDN reference, following the official installation documentation. Do not rely on an unversioned URL or NPM’s
latesttag to select htmx 4. - Run the upgrade checker. Scan templates and JavaScript, then inspect each finding against the relevant code path. The checker identifies some obsolete attributes, event names, and APIs; it does not validate runtime behavior.
- Audit inherited attributes. Find behavior that depends on implicit inheritance. Mark intended inheritance explicitly with the documented
:inheritedform, or usehtmx.config.implicitInheritanceas a deliberate compatibility measure while migrating. - Exercise error responses. Test server-generated 4xx and 5xx responses in the interface, and confirm whether swapped error content or no-swap behavior is intended. Check the documented
htmx.config.noSwapoption if the old handling is required. - Test history navigation. Use browser back and forward on pages with dynamic content and third-party DOM libraries. Confirm the server-rendered response produces the expected restored page; evaluate
hx-history-cacheonly if session-based local restoration is appropriate. - Update JavaScript hooks. Rename event listeners and
hx-onhandlers, and remove dependencies on XHR-specific or replaced validation events. Test each affected request and validation path. - Review extensions and swap syntax. Check custom extensions, SSE and WebSocket integrations, and any combined
showorscrollselector-position modifiers against the official htmx 4 change catalog.
How to decide whether to upgrade now
The NPM tag does not make the decision for your application. If you depend on htmx 2 defaults or custom code tied to old events, treat the move as a major-version migration and test the affected behavior before deployment. If you want to evaluate htmx 4, pin it explicitly, migrate deliberately, and keep a rollback path until application-level checks pass. The release and migration sources cited here do not establish a general performance gain or adoption figure, so those should not be assumed as reasons to upgrade.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
