htmx 4.0.0正式发布，历时8个月开发。内部底层从XMLHttpRequest切换到fetch API，整体API和2.x版本差异不大，但有几处破坏性变更，同时带来大量新特性。

注意：npm上latest标签依旧指向2.x版本，4.0标记为next，2.x版本会长期维护，开发者不必强制升级。

三大破坏性变更（升级重点）

1. 属性继承改为显式声明

htmx2中父元素上的htmx属性会隐式继承给子元素，类似CSS。 4.0版本默认关闭继承，需要继承必须加上:inherited后缀。

htmx2写法

<div hx-confirm="Are you sure?">  <button hx-delete="/item/1">Delete</button></div>

htmx4写法

<div hx-confirm:inherited="Are you sure?">  <button hx-delete="/item/1">Delete</button></div>

旧的hx‑disinherit属性直接移除。

2. 事件名称标准化重命名

全部事件统一格式 htmx:phase:action[:sub‑action]。

• 大部分错误事件合并为htmx:error，HTTP错误使用htmx:response:error
• htmx:xhr:*系列事件被移除
• 表单校验事件改用浏览器原生校验

3. History历史不再默认使用localStorage

htmx2使用localStorage缓存页面快照，第三方JS修改DOM后回退会出现bug。 4.0回退时会重新发起请求获取页面内容，配合浏览器请求缓存，体验依然流畅。 需要本地缓存，引入扩展hx‑history‑cache，使用sessionStorage实现缓存。

重磅新特性

Morph Swaps 形态置换

内置idiomorph DOM morph算法，DOM局部更新更智能，尽量保留现有DOM节点状态，不用完全替换整个元素。

<hx‑partial>标签

全新标签，支持在单次响应中，同时更新页面多个不同目标区域，替代旧的out‑of‑band方案。

<hx-partial hx-target="#messages" hx-swap="beforeend">  <div>New message</div></hx-partial><hx-partial hx-target="#count">  <span>5</span></hx-partial>

大量全新扩展

• hx‑preload：鼠标悬浮时预加载内容，提升交互速度
• hx‑download：基于fetch实现文件下载
• hx‑alpine‑compat：解决和Alpine.js兼容问题
• 流式扩展：hx‑sse、hx‑ws、hx‑multipart，支持SSE、WebSocket、multipart/mixed流式HTML
• hx‑live：全新轻量DOM响应式脚本，对标Alpine.js

还提供htmax.js打包文件，把高频扩展全部打包，直接引入即可使用。

实操安装与升级指南

安装htmx 4.0

CDN引入

<script src="https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js"></script>

npm安装

npm install htmx@4.0.0

项目升级检查工具（强烈建议使用）

提供命令行工具扫描代码，自动找出继承、事件名、废弃属性问题。

npx htmx.org@4.0.0 upgrade-check -- ./templates

支持扫描html、php、jinja、js、ts等文件，可通过--ext增加自定义后缀。

同时提供LLM Agent Skill文件，可交给大模型辅助完成项目迁移。

LLM辅助开发文件

官方提供多套提示词skill文件，方便AI工具理解htmx4：

• htmx‑guidance：基础开发指引
• htmx‑debugging：问题排查
• htmx‑extension‑authoring：扩展开发
• htmx‑upgrade‑from‑htmx2：从2.x迁移项目

提示：现有项目可以继续使用2.x版本，官方会无限期维护，不需要急于迁移。

来源：

官网：https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released

github仓库：https://github.com/bigskysoftware/htmx​

阅读原文：点击这里