⚡ 什么是 HTMX？

HTMX 是一个小巧（14KB gzipped）、零依赖的 JavaScript 库，让你直接从 HTML 访问现代浏览器功能，无需编写 JavaScript。

🎯 核心理念

  • HTML 优先：在 HTML 中完成一切
  • 零 JavaScript：无需编写 JS 代码
  • 超媒体驱动：服务器返回 HTML 而非 JSON
  • 渐进增强：可与传统服务器渲染配合
  • 后端无关：支持任何后端语言

📊 项目信息

⭐

GitHub Stars

44K+ 开发者关注

🏆

JS Rising Stars 2024

前端框架类冠军

📦

体积

14KB (gzipped)

⚡

零依赖

无需其他库

🚀 简单示例

点击按钮获取内容

html
<!-- 点击按钮，从服务器获取内容并替换按钮 -->
<button hx-get="/hello" hx-swap="outerHTML">
  点击我
</button>

<!-- 服务器返回: <button>Hello World!</button> -->

实时搜索

html
<input type="text" 
       hx-get="/search" 
       hx-trigger="input changed delay:500ms" 
       hx-target="#results">

<div id="results"></div>

无限滚动

html
<div hx-get="/more" 
     hx-trigger="revealed" 
     hx-swap="afterend">
  加载更多内容...
</div>

🔧 核心能力

能力说明
AJAX 请求任何元素触发 GET/POST/PUT/DELETE
CSS 过渡平滑的 DOM 更新动画
WebSocket实时双向通信
Server Sent Events服务器推送
事件处理丰富的触发条件

🎯 为什么选择 HTMX？

vs React/Vue/Angular

对比项HTMX传统 SPA
学习曲线极低较高
代码量少 50-80%多
SEO原生友好需额外处理
首屏速度快需加载大 JS
后端配合返回 HTML返回 JSON

📖 更多文档