如果你是一名后端开发者你一定经历过这样的痛苦为了给页面加一个「点击加载更多」按钮你需要搭建 Node.js 构建环境、引入 React 或 Vue、配置 Webpack、管理 npm 依赖、处理状态管理……最终你会发现为了一个 20 行的功能你引入了 200MB 的 node_modules。HTMX 正是为了解决这个问题而诞生的。它的核心理念直白得令人震惊——通过 HTML 属性直接在标签上声明动态行为无需写一行 JavaScript就能实现 AJAX 请求、局部 DOM 更新、CSS 过渡动画、WebSocket 实时通信等能力。HTMX 由 Carson Gross 创建自 2020 年以来迅速在前端社区走红在 GitHub 上已获得超过 35,000 个 Star。它不是另一个试图取代 React 的前端框架而是一种全新的思路回归 HTML 的原生能力将交互逻辑声明式地写在标签属性中由服务端返回 HTML 片段驱动的动态页面。这种范式被称为HATEOAS超媒体即应用状态引擎——一个听起来学术但实际极其务实的概念。简单来说前端不需要维护状态不需要客户端路由不需要虚拟 DOM diff页面的完整状态由后端通过 HTML 响应来驱动。使用优点1. 无需 JavaScript 即可实现动态交互这是 HTMX 最核心的优势。传统前端开发中哪怕一个最简单的「点击按钮替换一段文字」也需要// 传统方式 document.getElementById(btn).addEventListener(click, async () { const res await fetch(/api/data); const html await res.text(); document.getElementById(result).innerHTML html; });而使用 HTMX同样的功能只需在 HTML 标签上添加一个属性button hx-get/data hx-target#result 加载数据 /button div idresult/div所有的 AJAX 请求、响应处理、DOM 更新全部由 HTMX 库自动完成。你完全不需要触碰 JavaScript后端只需要返回标准的 HTML 片段。对于后端开发者而言这意味着你可以用 Django、Flask、Laravel、Express、Go 等任何技术栈直接渲染 HTML 模板片段来驱动前端交互无需维护额外的 API 层。更深层的意义在于交互逻辑回到了它本该在的地方。页面状态由服务端 HTML 决定前端不再需要「同步」两个独立的状态树。你不再需要写 Redux store 来管理一个从服务端拿来的数据——因为后端本身就是唯一的状态源。2. 极致轻量、零依赖HTMX 的核心文件压缩后仅约14KBgzip 后约 5KB没有任何第三方依赖。对比主流框架框架/库压缩后体积HTMX~14KBReact ReactDOM~130KBVue 3~34KBAngular~170KB14KB 是什么概念一张普通网页的背景图片可能就有几百 KB。HTMX 的体积小到你可以直接把它内联到 HTML 的 script 标签中甚至在某些限制严格的企业内网环境中也不会因为体积问题被防火墙拦截。因为没有构建步骤你不需要 npm、不需要 node_modules、不需要 Webpack 或 Vite。你只需要在 HTML 里加一行 CDN 引用就可以开始使用全部功能。对于个人项目、原型开发、或者技术栈受限的团队来说这是巨大的效率提升。3. 渐进增强向后兼容HTMX 的设计哲学是「在不破坏原有功能的前提下增强」。一个使用 HTMX 的按钮在禁用 JavaScript 的浏览器中会优雅地退化为普通链接或表单提交——页面依然可用只是不再有动态更新。这一点与 SPA 框架形成鲜明对比。当一个纯 React 页面失去了 JavaScript用户看到的就是一个空白页面。而 HTMX 实现的页面核心功能导航、表单提交等不依赖 JavaScript动态交互是锦上添花而非生存必需。对于需要支持可访问性a11y、SEO 优化、或者对老旧浏览器有兼容性要求的项目这种渐进增强的策略是唯一正确的选择。4. 与任何后端语言和框架天然兼容HTMX 不关心你的后端用什么。它只做一件事发送 HTTP 请求接收 HTML 响应把响应插入 DOM。这意味着Django 开发者可以用模板引擎渲染 tr 片段Flask/Jinja2 可以直接返回 render_template(partial.html)Laravel Blade 可以返回局部视图Go 的 html/template 同样无缝配合甚至静态 HTML 文件配合 SSI服务端包含也能用这带来了一个被低估的好处后端团队不需要为了配合前端框架维护一套 JSON API。你只需维护一套服务端渲染的 HTML 模板既用于首次加载也用于 HTMX 的局部更新。代码复用率大幅提升前后端之间不再有「API 契约」的协商成本。5. 学习曲线极低HTMX 的核心属性大约只有十几个其中日常使用只需掌握 5-6 个。如果你已经理解 HTML 的基本概念标签、属性、HTTP 方法你可以在一个下午完全掌握 HTMX。核心属性速览属性作用hx-get发送 GET 请求hx-post发送 POST 请求hx-put / hx-patch / hx-delete对应 HTTP 方法hx-target指定响应内容的插入目标hx-swap控制内容替换策略hx-trigger触发事件类型hx-boost将普通链接/表单升级为 AJAX对比 React 需要的知识栈JSX、虚拟 DOM、HooksuseState/useEffect/useMemo/useCallback、状态管理Redux/Zustand、路由React Router、构建工具链……HTMX 的学习成本几乎为零。6. 直接操作真实 DOM无需虚拟 DOMReact 引入虚拟 DOM 是因为当时真实 DOM 操作性能不佳需要 diff 算法减少直接操作。但在 2025 年的浏览器环境下这个前提已不再成立。现代浏览器的 DOM 操作性能已经足够快虚拟 DOM 的价值更多体现在声明式编程范式和跨平台渲染上。HTMX 直接操作真实 DOM不经过任何中间层。服务端返回什么 HTMLDOM 就变成什么。这种「所见即所得」的模式消除了大量调试成本——你不需要在 React DevTools 里追踪组件树和 state 的变化打开浏览器开发者工具查看 Elements 面板一切都清晰可见。使用场景1. 多页面应用MPA中实现 SPA 体验这是 HTMX 最经典的应用场景。传统的多页面应用每次导航都会完整刷新页面造成白屏闪烁和状态丢失。使用 HTMX 的 hx-boost 属性一行代码就能让所有链接和表单变成无刷新的 AJAX 导航body hx-boosttrue header.../header main idmain-content !-- 页面内容区域 -- /main footer.../footer /bodyhx-boost 会自动拦截所有 a 和 form 的默认行为改为 AJAX 请求并将响应替换到指定区域。结合 hx-push-urltrue浏览器地址栏的 URL 也会同步更新浏览器的前进/后退按钮正常工作——用户完全感受不到这是一个 MPA。对于内容型网站博客、新闻、文档站、电商商品列表页这种方案比引入 React/Vue 做 SSR 要简洁得多SEO 也不会受到任何影响。2. 表单提交与验证HTMX 对表单的处理堪称优雅。一个带服务端验证的登录表单form hx-post/login hx-target#form-result hx-swapinnerHTML input typetext nameusername placeholder用户名 required / input typepassword namepassword placeholder密码 required / button typesubmit登录/button /form div idform-result/div后端以 Flask 为例的处理app.post(/login) def login(): username request.form.get(username) password request.form.get(password) if not username or not password: return p classerror用户名和密码不能为空/p, 400 user authenticate(username, password) if not user: return p classerror用户名或密码错误/p, 401 return p classsuccess登录成功正在跳转.../pscriptlocation.href/dashboard/script关键点在于后端返回的 HTML 包含了所有验证错误信息和成功后的跳转指令。前端不需要写任何表单验证逻辑客户端验证可作为 UX 增强单独添加也不需要管理 loading 状态——HTMX 会自动为正在请求的元素添加 htmx-request class你可以用 CSS 显示加载动画。3. 无限滚动与分页加载实现一个「滚动到底部自动加载更多」的列表div hx-get/posts?page1 hx-triggerrevealed hx-swapafterend !-- 第一页内容由服务端渲染 -- div classpost.../div div classpost.../div /divhx-triggerrevealed 表示当这个元素进入视口时触发请求。后端返回div classpost.../div div classpost.../div div hx-get/posts?page2 hx-triggerrevealed hx-swapouterHTML 加载更多... /div注意返回的 HTML 中包含了下一页的触发元素。这种模式让每一批内容都带着「下一页的触发器」形成自然的无限滚动链。当没有更多内容时后端只需返回一个不含 hx-get 的结束标记即可终止滚动。结合 hx-swapafterend在当前元素之后插入和 hx-swapouterHTML替换整个元素你还可以灵活实现追加、替换、插入等不同行为。4. WebSocket 实时推送HTMX 内置了 WebSocket 支持只需一个属性就能让页面与服务器建立长连接div hx-wsconnect:/ws/notifications div idnotification-area/div /div服务端通过 WebSocket 发送 HTML 片段HTMX 自动将其插入到连接元素内部。你可以轻松实现实时通知、在线人数更新、股票行情推送等功能# 后端 (Python websockets) import asyncio import websockets import json async def handler(websocket): while True: notification await get_latest_notification() html fdiv classalert{notification[message]}/div await websocket.send(html) await asyncio.sleep(5)HTMX 还支持 SSEServer-Sent Events通过 hx-sse 属性连接服务端事件流div hx-sseconnect:/sse/updates swap:message hx-swapbeforeend !-- 新消息会自动追加到这里 -- /div5. 主动搜索与内联编辑一个常见的搜索建议框input typetext nameq hx-get/search/suggest hx-triggerkeyup changed delay:300ms hx-target#suggestions hx-swapinnerHTML placeholder搜索... / div idsuggestions/divhx-trigger 中的 changed 修饰符确保只在值真正改变时触发delay:300ms 实现了 300 毫秒的防抖。后端根据 q 参数返回匹配结果的 HTML 列表即可。内联编辑inline edit同样简洁div hx-get/user/bio/1 hx-triggerdblclick hx-swapouterHTML 点击此处查看个人简介 /div当用户双击这个 div 时后端返回一个包含 textarea 的表单表单本身也带有 HTMX 属性用于提交更新。整个编辑流程不需要任何 JavaScript。6. 后台管理系统后台管理系统是 HTMX 的天然主场。这类系统的特点是页面结构固定侧边栏 顶栏 内容区、交互模式有限CRUD 表单 列表 详情、用户量少但功能复杂。用 React/Vue 做后台管理的典型问题是一个简单的用户列表页面需要写组件、定义 API、处理 loading/error 状态、做分页逻辑代码量膨胀严重。使用 HTMX 任意后端模板引擎后端代码和前端交互合二为一。一个带分页、搜索、删除确认的用户列表后端模板直接渲染 table 片段前端只需在容器上声明 HTMX 属性即可。维护成本大幅降低新功能开发效率极高。具体使用方式安装与引入CDN 引入推荐零配置script srchttps://unpkg.com/htmx.org2.0.4 integritysha384-HGf6n6w2oYs0e3lz4m5p0p9sLp5V5Dp5P6dEBVr6T7jO5s4v6B5v8F5B5Z5 crossoriginanonymous/scriptnpm 安装npm install htmx.org然后在入口文件中导入import htmx.org;HTMX 在加载后自动扫描 DOM 中的 hx-* 属性并绑定事件不需要任何初始化代码。核心属性详解hx-get / hx-post / hx-put / hx-patch / hx-delete这五个属性分别对应 HTTP 的五种方法。值是一个 URLHTMX 会向该 URL 发起相应方法的请求。hx-target指定响应内容的插入目标值为 CSS 选择器。支持以下特殊值this当前元素closest selector向上查找最近的匹配元素find selector在当前元素内查找next selector / previous selector相邻元素默认目标是触发元素自身。hx-swap控制 HTML 响应的插入方式值行为innerHTML默认替换目标内部 HTMLouterHTML替换整个目标元素beforebegin在目标前面插入afterbegin在目标内部最前面插入beforeend在目标内部最后面插入afterend在目标后面插入none不插入仅触发事件此外还支持 transition:true 子修饰符让 DOM 更新时自动应用 CSS 过渡动画。hx-trigger定义触发请求的事件支持丰富的修饰符!-- 点击触发 -- button hx-get/data hx-triggerclick加载/button !-- 输入防抖 -- input hx-get/search hx-triggerkeyup changed delay:500ms / !-- 节流 -- button hx-post/save hx-triggerclick throttle:2s保存/button !-- 元素出现时触发 -- div hx-get/more hx-triggerrevealed.../div !-- 每隔 5 秒轮询 -- div hx-get/status hx-triggerevery 5s.../div !-- 从其他元素的事件触发 -- button hx-get/data hx-triggerclick from:#trigger-btn.../button完整示例 1点击按钮无刷新加载内容前端 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTMX 示例 - 无刷新加载/title script srchttps://unpkg.com/htmx.org2.0.4/script style #content-area { border: 1px solid #ddd; padding: 20px; min-height: 100px; margin: 10px 0; } .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /style /head body h1HTMX 动态内容加载/h1 button hx-get/api/article/1 hx-target#content-area hx-swapinnerHTML 加载文章 1 /button button hx-get/api/article/2 hx-target#content-area hx-swapinnerHTML 加载文章 2 /button div idcontent-area p点击上方按钮加载文章内容。/p /div !-- 加载指示器 -- div classhtmx-indicator idspinner styletext-align:center; padding:20px; img src/static/spinner.svg width30 / /div /body /html后端Flaskfrom flask import Flask, render_template_string app Flask(__name__) articles { 1: {title: HTMX 入门指南, content: HTMX 是一个轻量级的前端库...}, 2: {title: 为什么选择 HTMX, content: 在 2025 年前端开发的复杂性已经...}, } app.get(/api/article/int:article_id) def get_article(article_id): article articles.get(article_id) if not article: return p stylecolor:red文章未找到/p, 404 return render_template_string( h2{{ article.title }}/h2 p{{ article.content }}/p small加载时间: {{ now }}/small , articlearticle, now刚刚) if __name__ __main__: app.run(debugTrue)每次点击按钮只有 #content-area 区域的内容被替换页面其他部分保持不变。完整示例 2表单提交与局部更新前端 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTMX 表单提交/title script srchttps://unpkg.com/htmx.org2.0.4/script style .success { color: green; } .error { color: red; } .alert { padding: 10px; border-radius: 4px; margin: 10px 0; } .alert-success { background: #d4edda; border: 1px solid #c3e6cb; } .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; } /style /head body h1用户注册/h1 form hx-post/api/register hx-target#form-response hx-swapinnerHTML hx-indicator#form-spinner div label用户名/label input typetext nameusername required minlength3 / /div div label邮箱/label input typeemail nameemail required / /div div label密码/label input typepassword namepassword required minlength6 / /div button typesubmit 注册 img idform-spinner classhtmx-indicator src/static/spinner.svg width16 / /button /form div idform-response/div /body /html后端Flaskapp.post(/api/register) def register(): username request.form.get(username, ).strip() email request.form.get(email, ).strip() password request.form.get(password, ) errors [] if len(username) 3: errors.append(用户名至少 3 个字符) if not in email: errors.append(请输入有效的邮箱地址) if len(password) 6: errors.append(密码至少 6 位) if errors: error_html .join(fli{e}/li for e in errors) return fdiv classalert alert-errorul{error_html}/ul/div, 422 # 模拟注册成功 return f div classalert alert-success strong注册成功/strong 欢迎你{username}。 /div scriptsetTimeout(() location.href/dashboard, 1500)/script , 200当用户提交表单后响应直接替换 #form-response 区域。成功或失败的信息都由后端控制前端不维护任何验证状态。完整示例 3无限滚动前端 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTMX 无限滚动/title script srchttps://unpkg.com/htmx.org2.0.4/script style .post-card { border: 1px solid #e0e0e0; padding: 16px; margin: 12px 0; border-radius: 8px; } .post-card h3 { margin: 0 0 8px 0; } #loading-spinner { text-align: center; padding: 20px; color: #999; } /style /head body h1文章列表无限滚动/h1 div idpost-list !-- 初始由服务端渲染第一页 -- /div !-- 滚动触发器 -- div hx-get/api/posts?page1 hx-triggerrevealed hx-swapafterend hx-target#post-list /div div idloading-spinner classhtmx-indicator 加载中... /div /body /html后端app.get(/api/posts) def get_posts(): page request.args.get(page, 1, typeint) per_page 5 posts_data all_posts[(page-1)*per_page : page*per_page] posts_html for post in posts_data: posts_html f div classpost-card h3{post[title]}/h3 p{post[summary]}/p small{post[date]}/small /div if len(posts_data) per_page: # 没有更多数据返回结束标记 return posts_html p styletext-align:center;color:#999—— 已经到底了 ——/p # 继续追加下一页的触发器 trigger f div hx-get/api/posts?page{page1} hx-triggerrevealed hx-swapouterHTML /div return posts_html trigger当用户滚动到底部revealed 事件触发自动加载下一页。触发器元素自身会被 outerHTML 替换为新返回的内容包含下一页的触发器形成自然的无限加载链。完整示例 4WebSocket 实时消息推送前端 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTMX WebSocket 实时消息/title script srchttps://unpkg.com/htmx.org2.0.4/script style #messages { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 10px; } .message { padding: 8px; margin: 4px 0; border-radius: 6px; } .system-msg { background: #f0f0f0; text-align: center; font-size: 12px; } .user-msg { background: #e3f2fd; } /style /head body h1实时消息面板/h1 div hx-wsconnect:/ws/messages div idmessages p正在连接服务器.../p /div /div form hx-wssend:submit input typetext namecontent placeholder输入消息... required / button typesubmit发送/button /form /body /html后端Python websocketsimport asyncio import websockets from websockets.asyncio.server import serve CONNECTED set() async def handler(websocket): CONNECTED.add(websocket) try: await websocket.send( div classmessage system-msg你已加入聊天室/div ) async for message in websocket: # 从客户端收到的消息广播给所有连接 greeting fdiv classmessage user-msg{message}/div websockets.broadcast(CONNECTED, greeting) finally: CONNECTED.remove(websocket) async def main(): async with serve(handler, localhost, 8765): await asyncio.get_running_loop().create_future() if __name__ __main__: asyncio.run(main())hx-wsconnect:/ws/messages 建立 WebSocket 连接服务端推送的 HTML 片段会自动插入到连接元素内部。hx-wssend:submit 让表单提交时通过 WebSocket 发送数据而非 HTTP POST。完整示例 5行内编辑Inline Edit前端 HTMLdiv classeditable-field hx-get/api/user/bio/edit hx-triggerdblclick hx-swapouterHTML p这里是用户的个人简介。双击此处进行编辑。/p /div后端返回编辑表单form hx-put/api/user/bio hx-swapouterHTML hx-targetclosest form classeditable-field textarea namebio rows4 stylewidth:100%这里是用户的个人简介。双击此处进行编辑。/textarea div stylemargin-top:8px button typesubmit保存/button button typebutton hx-get/api/user/bio/view hx-swapouterHTML hx-targetclosest form取消/button /div /form保存成功后返回只读视图div classeditable-field hx-get/api/user/bio/edit hx-triggerdblclick hx-swapouterHTML p更新后的个人简介内容。/p /div整个交互流程完全由服务端 HTML 驱动没有前端状态管理不写一行 JavaScript。进阶技巧hx-boost一行代码实现 SPA 导航在 body 上添加 hx-boosttrueHTMX 会自动拦截页面内所有 a 链接和 form 表单的默认行为转为 AJAX 请求body hx-boosttrue hx-target#main hx-swapinnerHTML nav a href/首页/a a href/about关于/a a href/blog博客/a /nav main idmain !-- 内容区域 -- /main /body配合 hx-push-urltrue浏览器 URL 和浏览历史也会同步更新实现完整的 SPA 导航体验body hx-boosttrue hx-target#main hx-swapinnerHTML hx-push-urltrue排除不需要 AJAX 化的链接也很简单——给它们加上 hx-boostfalse。事件系统与 hx-onHTMX 提供了完整的事件系统和 hx-on 属性允许在 HTML 中直接绑定事件处理!-- 使用 inline JavaScript -- button hx-get/data hx-on::after-requestconsole.log(请求完成) 加载 /button !-- 使用 hx-on 绑定 HTMX 事件 -- div hx-get/status hx-triggerevery 10s hx-on:htmx:before-requestthis.style.opacity0.5 hx-on:htmx:after-requestthis.style.opacity1 ... /divHTMX 的内置事件包括 htmx:before-request、htmx:after-request、htmx:response-error、htmx:before-swap 等覆盖请求生命周期的每个阶段。你也可以在 JavaScript 中通过 document.body.addEventListener(htmx:after-request, handler) 全局监听。配合服务端模板的最佳实践HTMX 与模板引擎的配合有一个重要的思维转变把页面拆分为「完整页面」和「片段」两种返回模式。判断请求是否来自 HTMX 的一个简单方法是检查请求头 HX-RequestHTMX 会自动发送app.get(/users) def users(): users User.query.all() if request.headers.get(HX-Request): # HTMX 请求返回片段 return render_template(users/_table.html, usersusers) # 普通请求返回完整页面 return render_template(users/index.html, usersusers)这样同一个路由可以同时支持完整页面加载首次访问和 HTMX 局部更新后续操作。模板中users/index.html 通过 {% include users/_table.html %} 复用片段模板消除重复代码。总结与适用建议HTMX 不是 React 或 Vue 的替代品——它是一条完全不同的技术路线。它拥抱了 Web 最原始也是最强大的架构服务端渲染 HTML前端声明式增强。HTMX 特别适合以下场景后端开发者主导的全栈项目不想引入复杂的前端工具链内容型网站博客、文档站、CMS需要 SEO 且不需要复杂的客户端状态管理后台管理系统、内部工具功能明确、交互模式相对固定团队规模小、没有专职前端开发者的项目对页面性能有极致要求14KB 的核心库零构建开销渐进式改造现有 MPA 项目逐步增加动态交互HTMX 不太适合的场景高度交互的应用在线协作白板、复杂的数据可视化仪表盘、图形编辑器等需要离线能力的 PWA 应用需要在客户端维护复杂状态树的场景HTMX 的设计哲学有意地避免这一点个人建议将 HTMX 纳入你的技术工具箱。即使你的主力项目仍然使用 React/VueHTMX 也可以作为「轻量级方案」用于快速原型、后台管理界面、以及那些「只差一点点交互」的静态页面。它让你在不需要出动重型框架的时候有一个恰到好处的选择。归根结底最好的工具不是功能最强大的那个而是刚好满足需求且复杂度最低的那个。对大多数 Web 应用而言HTMX 恰好踩在这个甜点上。