htmx
高性能工具

HTML 的
高性能工具

htmx 让你直接在 HTML 中使用属性驾驭 AJAX、CSS 过渡、WebSockets 与服务器推送事件,以超文本的简洁与强大构建现代用户界面。

浏览器HTML 文档 · 常驻
GET · POST · PUT · PATCH · DELETE ▸
服务器片段 · 就地生成
◂ HTML 即响应
  • 约 12 KB(min.gz)
  • 零依赖
  • 可扩展
  • 版本 v4.0.0
  • 承自 intercooler.js
当用户点击这个按钮时,向 /clicked 发起一次 AJAX 请求,并用响应内容替换掉整个按钮。— htmx 对 hx-post 与 hx-swap 的解读

htmx 移除这些武断的限制,把 HTML 完善为真正的超文本。任何标签都能发起任何方法的请求,任何事件都能成为触发器,响应的 HTML 可以精准替换页面的任何角落。

一行属性,一次请求 · index.html
<!-- 让按钮通过 AJAX 发送一次点击的 POST 请求 -->
<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

四问

为什么只有 <a><form> 才能发起 HTTP 请求?

为什么只有 clicksubmit 事件才能触发它们?

为什么只能用 GET 和 POST?

为什么只能替换整个页面?


本站就是一件 htmx 作品:没有打包器,没有虚拟 DOM,页面切换由 hx-boost:inherited 完成,以下每处「演示」都是浏览器与本服务的实时超文本往返。

v4 新纪元:从零重写

htmx 4 换掉传输层(XHRfetch())、收紧继承模型、统一事件命名,并补上了过去只能外挂框架才做得动的两块拼图:差异融合局部响应式

hx-partial 一次响应多处落点

响应里直接放多路片段,各自声明 hx-target 与 hx-swap——一处提交,多处更新,不必再靠 OOB 打补丁。

innerMorph 融合而非重建

按 id 就地比对差异:焦点、滚动、动画、播放中的视频与表单值都活下来,只有该变的变。

hx-live 响应式引擎

状态就近挂在 data-*,hx-on 改它、hx-live 绑它——局部交互零服务器往返,不必再外挂框架。

hx-status 状态码分流

取代旧 responseHandling 配置:422 改道错误区、5xx 干脆不换,一个属性说清全部状态码去向。

通读 v4 新纪元 ▸

JavaScript 疲劳:
渴望一段超文本
已在手中

—— htmx README · 俳句
静态快照 · 部分演示需动态服务器