扩展生态 - HTMX 文档

📦 官方扩展

扩展	说明
htmx-ext-ws	WebSocket 支持
htmx-ext-sse	Server Sent Events
htmx-ext-path-params	路径参数
htmx-ext-response-targets	响应目标
htmx-ext-loading-states	加载状态
htmx-ext-head-support	Head 支持
htmx-ext-preload	预加载
htmx-ext-class-tools	类工具
htmx-ext-remove-me	自动移除
htmx-ext-alpine-morph	Alpine.js 集成

🔌 安装扩展

CDN

html

<!-- 加载 HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>

<!-- 加载扩展 -->
<script src="https://unpkg.com/htmx-ext-ws@1.9.12"></script>

<!-- 启用扩展 -->
<body hx-ext="ws">
  ...
</body>

npm

bash

npm install htmx.org htmx-ext-ws

🔌 WebSocket 扩展

html

<div hx-ext="ws" ws-connect="/chat">
  <!-- 接收消息 -->
  <div id="messages"></div>
  
  <!-- 发送消息 -->
  <form ws-send>
    <input name="message">
    <button>发送</button>
  </form>
</div>

📡 SSE 扩展

html

<div hx-ext="sse" sse-connect="/events">
  <!-- 监听特定事件 -->
  <div sse-swap="message">等待消息...</div>
  
  <!-- 监听多个事件 -->
  <div sse-swap="message,update"></div>
</div>

🚀 预加载扩展

html

<body hx-ext="preload">
  <!-- 鼠标悬停时预加载 -->
  <a href="/page" preload="mouseover">链接</a>
  
  <!-- 页面加载时预加载 -->
  <a href="/page" preload="load">链接</a>
</body>

🔄 Idiomorph 扩展

智能 DOM 合并算法：

html

<script src="https://unpkg.com/idiomorph"></script>
<script src="https://unpkg.com/htmx-ext-idiomorph"></script>

<div hx-ext="idiomorph">
  <div hx-get="/update" hx-swap="morph">
    内容将被智能合并
  </div>
</div>