{ "archive_path": "archive/1787969357.331601", "base_url": "four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released", "basename": "2026-08-28-htmx-4.0.0-is-released", "bookmarked_date": "2026-08-29 02:09", "canonical": { "archive_org_path": "https://web.archive.org/web/four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released", "dom_path": "output.html", "favicon_path": "favicon.ico", "git_path": "git/", "google_favicon_path": "https://www.google.com/s2/favicons?domain=four.htmx.org", "headers_path": "headers.json", "htmltotext_path": "htmltotext.txt", "index_path": "index.html", "media_path": "media/", "mercury_path": "mercury/content.html", "pdf_path": "output.pdf", "readability_path": "readability/content.html", "screenshot_path": "screenshot.png", "singlefile_path": "singlefile.html", "warc_path": "warc/", "wget_path": "four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released.html" }, "domain": "four.htmx.org", "extension": "0-is-released", "hash": "1PEE8R3GFWVBSJSKW5B4", "history": { "archive_org": [], "dom": [], "favicon": [ { "cmd": [ "curl", "--silent", "--location", "--compressed", "--max-time", "120", "--output", "favicon.ico", "--user-agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 ArchiveBox/0.7.4 (+https://github.com/ArchiveBox/ArchiveBox/) curl/curl 8.14.1 (x86_64-pc-linux-gnu)", "https://www.google.com/s2/favicons?domain=four.htmx.org" ], "cmd_version": "curl 8.14.1 (x86_64-pc-linux-gnu)", "end_ts": "2026-08-29T02:10:51.077504+00:00", "index_texts": null, "output": "favicon.ico", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:10:50.631176+00:00", "status": "succeeded" } ], "git": [], "headers": [ { "cmd": [ "curl", "--silent", "--location", "--compressed", "--head", "--max-time", "120", "--user-agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 ArchiveBox/0.7.4 (+https://github.com/ArchiveBox/ArchiveBox/) curl/curl 8.14.1 (x86_64-pc-linux-gnu)", "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" ], "cmd_version": "curl 8.14.1 (x86_64-pc-linux-gnu)", "end_ts": "2026-08-29T02:10:51.447050+00:00", "index_texts": null, "output": "headers.json", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:10:51.085779+00:00", "status": "succeeded" } ], "htmltotext": [], "media": [], "mercury": [ { "cmd": [ "/app/node_modules/@postlight/parser/cli.js", "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" ], "cmd_version": "1.0.0", "end_ts": "2026-08-29T02:11:05.587706+00:00", "index_texts": null, "output": "mercury", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:11:01.476848+00:00", "status": "succeeded" } ], "pdf": [], "readability": [ { "cmd": [ "/app/node_modules/readability-extractor/readability-extractor", "/tmp/tmp9eyrrqfe", "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" ], "cmd_version": "0.0.11", "end_ts": "2026-08-29T02:11:01.466524+00:00", "index_texts": [ "htmx 4.0.0 Release\nThe htmx team is very happy to announce the release of htmx 4.0.0! This is the culmination of 8 months of work (plus\na game) and we are very happy with the results.\nThe idea of htmx 4 started to germinate when I decided to create fixi and, in doing so, got\nmore familiar with the fetch() API and async programming in JavaScript. (htmx had always\nused XMLHttpRequest due\nto backwards compatibility issues.)\nOne chance evening I was contacted by Christian, who had some interesting ideas\naround streaming HTML that\ngot me thinking that moving the internals to fetch() would simplify things for him and for the library in general.\nAfter a bit of work I managed to get Michael and Alex on board, and we were off to the races.\nDevelopment has been very smooth. We started a port of fixi + the htmx test suite. Over time, we rediscovered why htmx\ndid many of the things that it did and moved our new implementation closer and closer to the old one. At this point\nthe behavioral differences between 2.x and 4.x are relatively small and where they do diverge we have made explicit\nchoices that we feel will put htmx-based applications in a good spot for\nbeing 100-year web services\nNote that we are not marking 4.0 as latest in NPM\nbecause we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 2.x will\nremain latest and the 4.0 line will remain next until some point in early 2027. The website, however, will reference 4.0.\nMajor Changes\nAs mentioned above, htmx 4, from a user\u2019s viewpoint, is almost identical to htmx 2. There are three major changes:\n\nAttribute inheritance is now explicit by default rather than implicit by default (this is the biggest upgrade item)\nThe htmx event names have been standardized & cleaned up. Some advanced users may need to change the events they\nlisten for.\nHistory support now does not use localStorage by default (which was a cause of many support headaches). Most people\nwon\u2019t notice this at all.\n\nInternally, we migrated from XMLHttpRequest to fetch() but that should be transparent for most users of htmx.\nAttribute Inheritance\nIn htmx 2 many attributes were \u201cinherited\u201d by default. This allows you to place attributes on parent elements and\ntheir behavior will apply to child elements. This behavior, which came from\nthe intercooler.js days, was inspired by CSS and, unsurprisingly, worked out about the same\nas CSS: powerful but difficult to understand at times.\nIn htmx 4 attributes are not inherited unless you explicitly say so by adding an\n:inherited after the attribute name:\n\n
\n \n
\n\n\n
\n \n
\nThis will be the largest upgrade burden in migrating from htmx 2 to htmx 4. To make things easier, we have provided\na command line tool to find places you need to mark as inherited.\nNote that attributes like hx-disinherit, etc. are no longer required and should be removed.\nEvents\nThe events triggered by htmx 2 had grown organically over the life of the library and were not particularly well\norganized, making it difficult to know exactly which event was fired when.\nIn htmx 4, all events now follow htmx:phase:action[:sub-action]:\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nhtmx 2htmx 4htmx:beforeRequesthtmx:before:requesthtmx:afterRequesthtmx:after:requesthtmx:beforeSwaphtmx:before:swaphtmx:afterSwaphtmx:after:swaphtmx:configRequesthtmx:config:request\nIn addition, the following changes were made:\n\nMost error events collapse into htmx:error. HTTP error responses fire\nhtmx:response:error.\nThe htmx:xhr:* events are removed. htmx 4 uses fetch().\nThe htmx:validation:* events are removed in favor of native browser form validation.\n\nThe full table is in What\u2019s New in htmx 4.\nThe command line upgrade checker flags old event names in hx-on attributes and in your JavaScript where it can find\nthem.\nHistory\nHistory support has always been included in htmx, allowing you to implement back-button aware actions with simple\nattributes. In htmx 2, a cache in localStorage was used to snapshot pages for restoration. Unfortunately a large\nsource of issues was that this snapshot could include DOM mutations by 3rd party JavaScript libraries. When the page was\nrestored, those mutations remained but the underlying JavaScript logic was not.\nhtmx 4 does not cache pages in localStorage. On back navigation htmx re-fetches the page and swaps it into ,\nor into the [hx-history-elt] element if one is present. This allows 3rd party JavaScript libraries to \u201cjust work\u201d in\nmost cases and, with good request caching, is very fast.\nIf you want local caching instead, we now ship a very complete hx-history-cache\nextension that restores history from sessionStorage and is designed to integrate well with scripting solutions like\nAlpine.js, etc.\nNew Features\nThere are two big new features in htmx 4, both of which we are really excited about:\nMorph Swaps\nWe now support morphing swaps out of the box with htmx. I created idiomorph and\nnearly included it in htmx 2.x but decided against it. In htmx 4, Michael has done great work improving on that\nalgorithm and integrating it seamlessly into htmx.\n\nAnother major new feature is the tag. This tag is similar to out-of-band swaps,\nbut is much clearer when you want to do something beyond just replacing a single element with a new version of itself:\n\n
New message
\n\n\n 5\n\nExtensions\nMuch of the excitement in htmx 4 is in the extensions. Switching to fetch() internally let us rethink how extensions\ncan and should work, and sparked the creation (and recreation) of many new extensions, for example:\n\nhx-preload - preload content (e.g. on mouseover) to speed requests up\nhx-download - native, fetch-based file downloads\nhx-alpine-compat - smooths over compatibility issues between htmx and Alpine.js\nhx-history-cache - caches history in sessionStorage, provides Alpine.js compatibility\n\nAdditionally, there are three new or updated streaming HTML extensions:\n\nhx-sse streams over text/event-stream.\nhx-ws streams and sends over WebSockets.\nhx-multipart streams over multipart/mixed\n\nFinally, we decided it was time to try our hand at our own small front-end scripting solution that tightly integrates with htmx. hx-live is inspired by Alpine.js, jQuery and hyperscript, and makes front end scripting pleasant and fun. It even supports what we are calling DOM-based, HATEOAS-friendly reactivity.\nThere is a new htmax.js bundle in the distribution which packages htmx with the most popular of these in a single file if you don\u2019t want to think about which ones you want to pick.\nUpgrading\nFor a complete upgrade guide see What\u2019s New in htmx 4.\nAs mentioned earlier, we are providing an upgrade tool to help you:\n$ npx htmx.org@4.0.0 upgrade-check -- ./templates\n\nFile extensions: .html, .php, .js, .ts, .jinja, .jinja2, .j2, .erb, .hbs\nUse --ext to add more (e.g. --ext .vue --ext .svelte)\n\nScanning 1 file(s)...\n\nFound 8 issue(s) in 1 of 1 file(s).\ntemplates/index.html:1: [inheritance] hx-headers needs :inherited suffix (descendant on line 3 has hx-delete) (this looks like a CSRF token; without :inherited the header does not reach child elements and the server rejects the request)\ntemplates/index.html:2: [inheritance] hx-target needs :inherited suffix (descendant on line 3 has hx-delete)\ntemplates/index.html:2: [inheritance] hx-confirm needs :inherited suffix (descendant on line 3 has hx-delete)\ntemplates/index.html:3: [renamed-attr] hx-disable -> rename to hx-ignore (hx-disable now means 'disable during request')\ntemplates/index.html:4: [removed-attr] hx-vars is removed -> use hx-vals with js: prefix\ntemplates/index.html:4: [removed-attr] hx-prompt is removed -> load the hx-prompt extension to keep the same syntax\ntemplates/index.html:9: [old-event] old event name \"htmx:afterRequest\" -> \"htmx:after:request\"\ntemplates/index.html:9: [old-api] htmx.addClass() is removed -> use element.classList.add()\nWe are also shipping an agent skill to assist in upgrading\nInstalling\nhtmx 4.0 can be installed via a package manager referencing version 4.0.0, or can be linked via a CDN:\n\n\nor Downloaded\nLLMs\nLike it or not, a lot of people are using LLMs and we are providing the following skills files for LLMs:\n\nhtmx-guidance - core htmx skills for developing with htmx 4\nhtmx-debugging - diagnosing htmx issues during dev\nhtmx-extension-authoring - writing and debugging htmx 4 extensions\nhtmx-upgrade-from-htmx2 - migrating a codebase from htmx 2.x to 4.x\n\n(Let\u2019s leave aside if releasing a new version of a library in the LLM era is a good or bad thing!)\nConclusion\nWe hope you enjoy htmx 4. htmx 2 will continue to be supported indefinitely so don\u2019t feel any pressure to upgrade.\nI\u2019d like to thank the following people for all their help with this release:\n\nMichael West - Incredible teammate & grug-brained developer\nChristian Tanul - Inspired htmx 4 & led the streaming & live extensions\nAlex Petros - For keeping the ship on an even keel\nStephen Mitchell - The genius behind the game\nStu Kennedy - Our WebSockets expert\nAndr\u00e9 Ahlert Jr. - Providing IDE & Editor Support\nDien Hoa Truong - For kicking the tires on early htmx 4 and helping fix many bugs\n\nUpgrade Music\nWouldn\u2019t be an htmx update without upgrade music:" ], "output": "readability", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:10:59.357439+00:00", "status": "succeeded" } ], "screenshot": [], "singlefile": [], "title": [ { "cmd": [ "curl", "--silent", "--location", "--compressed", "--max-time", "120", "--user-agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 ArchiveBox/0.7.4 (+https://github.com/ArchiveBox/ArchiveBox/) curl/curl 8.14.1 (x86_64-pc-linux-gnu)", "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" ], "cmd_version": "curl 8.14.1 (x86_64-pc-linux-gnu)", "end_ts": "2026-08-29T02:10:59.349651+00:00", "index_texts": null, "output": "htmx 4.0.0 has been released! ~ htmx", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:10:59.314533+00:00", "status": "succeeded" } ], "wget": [ { "cmd": [ "wget", "--no-verbose", "--adjust-extension", "--convert-links", "--force-directories", "--backup-converted", "--span-hosts", "--no-parent", "-e", "robots=off", "--timeout=120", "--restrict-file-names=windows", "--warc-file=/data/archive/1787969357.331601/warc/1787969451", "--page-requisites", "--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 ArchiveBox/0.7.4 (+https://github.com/ArchiveBox/ArchiveBox/) wget/GNU Wget 1.21.3", "--compression=auto", "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" ], "cmd_version": "GNU Wget 1.21.3", "end_ts": "2026-08-29T02:10:59.302833+00:00", "index_texts": null, "output": "four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released.html", "pwd": "/data/archive/1787969357.331601", "schema": "ArchiveResult", "start_ts": "2026-08-29T02:10:51.458104+00:00", "status": "succeeded" } ] }, "icons": null, "is_archived": true, "is_static": false, "latest": { "archive_org": null, "dom": null, "favicon": "favicon.ico", "git": null, "media": null, "pdf": null, "screenshot": null, "singlefile": null, "title": "htmx 4.0.0 has been released! ~ htmx", "warc": null, "wget": "four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released.html" }, "link_dir": "/data/archive/1787969357.331601", "newest_archive_date": "2026-08-29T02:11:01.476848+00:00", "num_failures": 0, "num_outputs": 6, "oldest_archive_date": "2026-08-29T02:10:50.631176+00:00", "path": "/announcements/2026-08-28-htmx-4.0.0-is-released", "schema": "Link", "scheme": "https", "snapshot_id": "bfbb9f52-222c-4842-9d14-ab6091e49444", "sources": [ "/data/sources/1787969357-import.txt" ], "tags": null, "tags_str": "", "timestamp": "1787969357.331601", "title": "htmx 4.0.0 has been released! ~ htmx", "updated": "2026-08-29T02:10:50.630659+00:00", "updated_date": "2026-08-29 02:10", "url": "https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released" }