示例代码

<input type="text" 
       name="q" 
       hx-get="/search" 
       hx-trigger="input changed delay:500ms, search" 
       hx-target="#results"
       placeholder="搜索...">

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

<!-- 初始内容 -->
<div hx-get="/items?page=2" 
     hx-trigger="revealed" 
     hx-swap="afterend">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
</div>

<!-- 服务器返回下一页 -->
<!-- <div hx-get="/items?page=3" ...>...</div> -->

<form hx-post="/register" hx-target="#result">
  <input name="email" 
         hx-post="/validate-email" 
         hx-trigger="changed delay:500ms"
         hx-target="next .error">
  <span class="error"></span>
  
  <input name="password" type="password">
  
  <button type="submit">注册</button>
</form>
<div id="result"></div>

<button hx-get="/modal" 
        hx-target="body" 
        hx-swap="beforeend">
  打开模态框
</button>

<!-- 服务器返回 -->
<!-- 
<div id="modal" class="modal">
  <div class="modal-content">
    <button onclick="this.closest('.modal').remove()">关闭</button>
    内容...
  </div>
</div>
-->

<form hx-post="/upload" 
      hx-encoding="multipart/form-data" 
      hx-target="#result">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>
<div id="result"></div>

<ul hx-post="/reorder" hx-trigger="end">
  <li draggable="true">项目 1</li>
  <li draggable="true">项目 2</li>
  <li draggable="true">项目 3</li>
</ul>

<script>
  // 使用 SortableJS 或原生拖拽
  document.addEventListener('dragend', () => {
    htmx.trigger('ul', 'end');
  });
</script>

<button hx-delete="/item/1" 
        hx-target="closest li"
        hx-swap="outerHTML swap:1s">
  删除
</button>

<!-- 服务器返回触发通知 -->
<!-- 
<div hx-swap-oob="true" id="toast">
  已删除
</div>
-->