HTML 的
高性能工具
htmx 让你直接在 HTML 中使用属性驾驭 AJAX、CSS 过渡、WebSockets 与服务器推送事件,以超文本的简洁与强大构建现代用户界面。
- 约 12 KB(min.gz)
- 零依赖
- 可扩展
- 版本
v4.0.0 - 承自
intercooler.js
当用户点击这个按钮时,向 /clicked 发起一次 AJAX 请求,并用响应内容替换掉整个按钮。— htmx 对 hx-post 与 hx-swap 的解读
htmx 移除这些武断的限制,把 HTML 完善为真正的超文本。任何标签都能发起任何方法的请求,任何事件都能成为触发器,响应的 HTML 可以精准替换页面的任何角落。
<!-- 让按钮通过 AJAX 发送一次点击的 POST 请求 -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>四问
为什么只有 <a> 和 <form> 才能发起 HTTP 请求?
为什么只有 click 和 submit 事件才能触发它们?
为什么只能用 GET 和 POST?
为什么只能替换整个页面?
本站就是一件 htmx 作品:没有打包器,没有虚拟 DOM,页面切换由 hx-boost:inherited 完成,以下每处「演示」都是浏览器与本服务的实时超文本往返。
v4 新纪元:从零重写
htmx 4 换掉传输层(XHR → fetch())、收紧继承模型、统一事件命名,并补上了过去只能外挂框架才做得动的两块拼图:差异融合与局部响应式。
hx-partial 一次响应多处落点
响应里直接放多路片段,各自声明 hx-target 与 hx-swap——一处提交,多处更新,不必再靠 OOB 打补丁。
innerMorph 融合而非重建
按 id 就地比对差异:焦点、滚动、动画、播放中的视频与表单值都活下来,只有该变的变。
hx-live 响应式引擎
状态就近挂在 data-*,hx-on 改它、hx-live 绑它——局部交互零服务器往返,不必再外挂框架。
hx-status 状态码分流
取代旧 responseHandling 配置:422 改道错误区、5xx 干脆不换,一个属性说清全部状态码去向。
v4 新纪元
从零重写:新属性、事件改名、迁移与破坏性变更全景
理念
四大限制、HATEOAS 与超文本的谱系
入门
引入脚本、第一次请求与本地开发
属性
全部 hx-* 属性的巡礼与速查
交换
hx-swap 策略、修饰符与过渡动画
触发
hx-trigger 事件语法与 htmx 生命周期
请求
参数、校验、指示器与响应头协议
扩展
官方扩展生态与自定义扩展
演示
点击计数、惰性加载、SSE 时钟……
资源
官方文档、贡献指南与许可
JavaScript 疲劳:
渴望一段超文本
已在手中