htmx - high power tools for HTML（用 HTML 属性直接驱动 AJAX 与实时通信的前端工具库）

htmx（</> htmx - high power tools for HTML）是一个让 HTML 本身具备现代交互能力的前端库。它允许你在 HTML 中使用属性直接访问 AJAX、CSS Transitions、WebSockets 和 Server Sent Events，用超文本的简洁与力量构建现代用户界面。项目自述其体积很小（约 14k min.gz'd）、无依赖（dependency-free）且可扩展（extendable）。

【设计动机】 项目在 README 中提出四个疑问作为动机：

通过移除这些人为限制，htmx 让 HTML 作为超文本变得完整。

1. 为什么只有 <a> 和 <form> 才能发起 HTTP 请求？
2. 为什么只有 click 和 submit 事件才能触发它们？
3. 为什么只有 GET 和 POST 可用？
4. 为什么只能替换整个屏幕？

【核心用法示例】 README 给出的快速开始代码为： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script> <!

-- have a button POST a click via AJAX --> <button hx-post="/clicked" hx-swap="outerHTML">Click Me</button> 其中 hx-post 与 hx-swap 属性告诉 htmx：当用户点击该按钮时，向 /clicked 发起 AJAX 请求，并用响应内容替换整个按钮。

【项目关系与资源】 htmx 是 intercooler.js 的继任者。官方站点与文档位于 https://htmx.org 与 https://htmx.org/docs。项目欢迎贡献，并提供了贡献指南（contribution guidelines），也提供赞助（sponsor）渠道。

【本地开发（hacking guide）】 在本地开发 htmx 需要先安装开发依赖，运行 npm install；然后在项目根目录启动一个 Web 服务器，最简便的方式是 npx serve。随后访问 http://0.0.0.0:3000/test/ 即可运行测试套件。之后可以修改 /src/htmx.js 添加功能，并在 /test 下相应区域补充测试。测试目录结构包括：

htmx 使用 mocha 测试框架、chai 断言框架，以及 sinon 来模拟（mock）AJAX 请求。

• /test/index.html：根测试页，其他所有测试都从此页引入
• /test/attributes：针对属性的测试
• /test/core：核心功能测试
• /test/core/regressions.js：回归测试
• /test/ext：扩展测试
• /test/manual：无法自动化的人工测试

【配图说明】 配图 1 为 htmx 的官方 Logo（</> htmx），来源为项目仓库 www/static/img/htmx_logo.1.png，用于标识该项目。

【常见问题】

npm 包名混淆：README 明确指出安装时应使用 npm install htmx.org --save

，并提醒存在一个旧的、已损坏的名为 htmx 的包，正确的包名是 htmx.org。

• 是否需要构建工具：快速开始表明可以直接通过 CDN 引入 dist/htmx.min.js 使用，无需构建步骤。
• 本地测试如何跑：启动静态服务器后访问 /test/ 路径即可，无需额外测试命令。

【适用对象】 希望以服务端渲染/超文本方式构建交互界面、减少手写 JavaScript 的前后端开发者与全栈工程师；以及从 intercooler.js 迁移的项目维护者。

— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。