HTMX 请求构建器

可视化选择 HTMX 请求方法、触发事件、目标、Swap 策略等属性组合，生成可直接使用的 HTML 元素代码，并附实时预览和属性速查表。

免费在线工具

Loading…

使用说明

直接点击“常用组合预设”里的卡片（如无限滚动、搜索自动完成、延迟加载、表单AJAX提交、轮询更新、确认删除），一键填充一套完整的 HTMX 属性组合（默认已加载“表单AJAX提交”预设）。
或者在“自定义构建”区域逐项选择：HTTP 方法（hx-get/post/put/delete/patch）、触发事件（click/load/revealed/intersect/mouseenter/change/keyup/轮询/自定义）、目标元素选择器、Swap 策略。
按需填写“附加选项”：加载指示器（hx-indicator）、确认提示（hx-confirm）、额外 JSON 参数（hx-vals）、触发源选择器（from:），以及是否启用 hx-disable/hx-boost/hx-sync。
下方“生成的 HTMX 元素代码”区域会实时更新，点击“复制代码”即可复制到你的 HTML 项目中使用。
“预览效果”区域会渲染出一个带有对应 HTMX 属性的真实按钮，可以直观看到目标/触发/Swap 三项关键属性；但由于页面未加载 htmx.js 库，点击预览按钮不会真的发起请求。
底部提供 HTMX 常用属性速查表，可随时查阅每个属性的说明和示例写法。

6 个常用组合预设：无限滚动、搜索自动完成、延迟加载、表单AJAX提交（默认加载）、轮询更新、确认删除，一键套用完整属性组合。
可视化配置 hx-get/post/put/delete/patch 五种请求方法。
可视化配置 hx-trigger：8 种内置事件预设（click/load/revealed/intersect/mouseenter/change/keyup/轮询）+ 自定义触发表达式输入框。
可视化配置 hx-target、hx-swap（8 种 Swap 策略：innerHTML/outerHTML/beforebegin/afterbegin/beforeend/afterend/delete/none）。
支持 hx-indicator、hx-confirm、hx-vals（JSON）、触发源 from: 选择器，以及 hx-disable/hx-boost/hx-sync 三个开关选项。
实时生成对应的 HTML 元素代码，一键复制。
提供带真实 HTMX 属性的按钮预览渲染，但页面未引入 htmx.js，点击预览按钮不会触发真实请求，仅用于查看属性组合后的元素长相。
内置 16 条常用 HTMX 属性速查表（属性名、说明、示例）。

快速拼出正确的 HTMX 属性组合

记不清 hx-trigger 里“延迟触发”或“变化后触发”的具体写法（如 keyup changed delay:300ms），通过下拉选择而不是凭记忆手写，减少语法出错。

给团队成员提供标准 HTMX 交互模式模板

项目里“无限滚动”“表单AJAX提交”“确认删除”这几种交互反复出现，直接点预设卡片生成一份标准写法分享给同事，保持代码风格统一。

学习 HTMX 属性含义

刚接触 HTMX，通过底部的属性速查表快速了解 hx-boost、hx-sync 等不太常用属性的作用和写法示例。

在正式接入 htmx.js 前预览元素结构

还没有在项目里引入 htmx.js，但想先确认生成的 HTML 属性组合是否符合预期，用预览区域看渲染出的按钮和下方展示的目标/触发/Swap 信息。

预览区域点击按钮会真的发起 HTMX 请求吗？

不会。页面没有加载 htmx.js 库，预览按钮只是带有正确 HTMX 属性的普通 HTML 元素，用来直观查看元素长相和下方标注的目标/触发/Swap信息，点击不会有任何网络请求发生。

生成的代码可以直接用吗？

生成的是标准的 HTML 元素（默认是一个 button），带有你配置好的全部 hx-* 属性，可以直接复制到已经引入 htmx.js 的页面里使用；如果你的项目还没引入 htmx.js，需要自行在页面中加入 htmx 脚本才能让这些属性生效。

“自定义触发”输入框要怎么填？

当触发事件选择“自定义...”时会出现这个输入框，可以填写 HTMX 支持的任意触发表达式，如 click delay:500ms（延迟500ms触发）或 keyup changed delay:300ms（值改变且停止输入300ms后触发）。

hx-vals 里的 JSON 格式有要求吗？

hx-vals 的值会原样写入 HTML 属性（用单引号包裹），你需要自己保证填写的内容是合法 JSON 字符串，工具不会对内容做 JSON 校验或格式化。