Search
hx-trigger
Match
hx-trigger="keyup changed delay:500ms"
Developer Tools
HTMX Cheat Sheet — Attributes and Triggers
Browse common HTMX attributes, triggers, and swap strategies with keyword search, copy visible snippets, and export Markdown in your browser. Useful for quick hx-* lookups without reading the full docs.
HTMXCheat SheetFrontend
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
开发工具
HTMX Cheat Sheet
Browse common HTMX attributes, triggers, and swap strategies with keyword search, copy visible snippets, and export Markdown in your browser. Useful for quick hx-* lookups without reading the full docs.
Core Actions
-
hx-get="/api"Issues a GET request to the URL -
hx-post="/api"Issues a POST request -
hx-put="/api"Issues a PUT request -
hx-patch="/api"Issues a PATCH request -
hx-delete="/api"Issues a DELETE request
Triggers (hx-trigger)
-
hx-trigger="click"Trigger on click (default for buttons) -
hx-trigger="submit"Trigger on submit (default for forms) -
hx-trigger="keyup changed delay:500ms"Debounced search input -
hx-trigger="mouseenter once"Lazy load on hover -
hx-trigger="every 2s"Polling: execute every 2 seconds
Target & Swap
-
hx-target="#result"Load res into ele matching CSS selector -
hx-target="this"Update the element doing the request -
hx-target="closest tr"Target a specific ancestor -
hx-swap="innerHTML"Replace inside target (Default) -
hx-swap="outerHTML"Replace entire target element -
hx-swap="beforeend"Append at the end of inside (Chat ui)
Loading Indicators
-
hx-indicator="#spinner"Add `htmx-request` class to element -
<div class="htmx-indicator">Hidden by default, shown during req
点击任意代码片段可复制；也可以搜索后复制或导出当前可见条目。
Use cases
- Check hx-get and hx-post request attribute syntax
- Look up hx-trigger delay and indicator patterns
- Export commonly used attributes to Markdown notes
How to use
- Browse panels or search by keyword
- Review attribute descriptions and sample snippets
- Copy visible entries or export Markdown
Example input and output
FAQ
Is this an interactive demo or a reference sheet?
It is primarily a searchable attribute reference with copy and export. It does not replace full official docs or live API testing.
What does export include?
Currently visible attribute entries are formatted as Markdown for notes or README files.
Tools
Related tools
Continue with another translated tool for a nearby task.
HTML Entity Cheat Sheet
HTML Entity Cheat Sheet — Named and Numeric Codes
Look up common HTML entities and numeric character references for spaces, currency, math, and typography symbols. Copy named or numeric forms for safer source markup.
HTML Entity Encoding
Tailwind Colors Cheat Sheet
Tailwind Colors Cheat Sheet — Full Scale Board
Browse Tailwind CSS color scales (including 50–950 steps) on one board. Search by name, scale, or HEX, then copy utility class names or raw HEX values for CSS projects.
Design Tailwind CSS
Mermaid Diagram Generator
Mermaid Diagram Generator — Templates and Syntax
Pick flowchart, sequence, Gantt, class, or state diagram templates, edit them, and output Mermaid syntax for Markdown docs or export .mmd files in your browser. Useful for README and technical diagrams.
Mermaid Diagrams Markdown