GluePuddingTool

HTMX Request Builder

Visually pick an HTMX request method, trigger event, target, and swap strategy, then generate ready-to-use HTML element markup with a live preview and an attribute reference table.

FreeOnline Tool
Loading…

How to Use

  1. Click a card under "Common Combo Presets" (infinite scroll, search autocomplete, lazy load, form AJAX submit, polling, confirm delete) to fill in a complete HTMX attribute combination in one click (the "form AJAX submit" preset is loaded by default).
  2. Or configure everything manually under "Custom Build": HTTP method (hx-get/post/put/delete/patch), trigger event (click/load/revealed/intersect/mouseenter/change/keyup/polling/custom), target selector, and swap strategy.
  3. Fill in "Additional Options" as needed: loading indicator (hx-indicator), confirmation prompt (hx-confirm), extra JSON parameters (hx-vals), a trigger-source selector (from:), and whether to enable hx-disable/hx-boost/hx-sync.
  4. The "Generated HTMX Element Code" panel updates live — click "Copy Code" to grab it for your HTML project.
  5. The "Preview" panel renders a real button with the configured HTMX attributes, plus a line summarizing the target/trigger/swap values — but since htmx.js is not loaded on this page, clicking the preview button does not actually send a request.
  6. A quick-reference table at the bottom lists common HTMX attributes with descriptions and example syntax.

Features

  • Six one-click presets — infinite scroll, search autocomplete, lazy load, form AJAX submit (loaded by default), polling, confirm-then-delete — each applying a complete attribute set.
  • Visual configuration for all five request methods: hx-get/post/put/delete/patch.
  • Visual configuration for hx-trigger: 8 built-in event presets (click/load/revealed/intersect/mouseenter/change/keyup/polling) plus a free-text field for custom trigger expressions.
  • Visual configuration for hx-target and hx-swap (8 swap strategies: innerHTML/outerHTML/beforebegin/afterbegin/beforeend/afterend/delete/none).
  • Support for hx-indicator, hx-confirm, hx-vals (JSON), a trigger-source from: selector, and three toggles — hx-disable/hx-boost/hx-sync.
  • Live-generates the corresponding HTML element markup, copyable with one click.
  • Renders a preview button carrying the real HTMX attributes — but since htmx.js isn't loaded on the page, clicking it triggers no real request; it's for inspecting how the element looks with your attribute combination.
  • Includes a 16-row quick-reference table of common HTMX attributes (name, description, example).

Use Cases

Assemble a correct HTMX attribute combo quickly
Can't quite remember the syntax for a delayed or debounced hx-trigger (e.g. keyup changed delay:300ms) — pick it from a dropdown instead of typing it from memory and risking a syntax slip.
Give the team a standard template for recurring HTMX patterns
"Infinite scroll," "form AJAX submit," and "confirm delete" show up repeatedly in the project — click the matching preset to generate the standard markup and share it, keeping the codebase consistent.
Learn what each HTMX attribute does
New to HTMX — use the reference table at the bottom to quickly understand less-common attributes like hx-boost and hx-sync, with example syntax for each.
Preview the element structure before wiring up htmx.js
Haven't added htmx.js to the project yet, but want to confirm the generated attribute combination looks right — use the preview panel to see the rendered button along with the target/trigger/swap summary underneath.

FAQ

Does clicking the preview button actually send an HTMX request?
No. htmx.js is not loaded on this page — the preview button is a plain HTML element carrying the correct HTMX attributes, meant for visually inspecting the element and the target/trigger/swap summary beneath it. Clicking it triggers no network request at all.
Can I use the generated code as-is?
It's a standard HTML element (a button by default) with all your configured hx-* attributes — paste it directly into a page that already loads htmx.js. If your project hasn't added the htmx.js script yet, you'll need to include it for these attributes to take effect.
What do I type in the "custom trigger" field?
This field appears when you select "Custom..." for the trigger event. Enter any trigger expression HTMX supports, such as click delay:500ms (fire 500ms after click) or keyup changed delay:300ms (fire 300ms after the value changes and typing pauses).
Are there any format requirements for the hx-vals JSON?
The hx-vals value is written verbatim into the HTML attribute (wrapped in single quotes) — you're responsible for making sure it's valid JSON. The tool does not validate or format the content for you.