htmx-derived.js — Live Demo

This page uses htmx-derived.js (332 lines, 10KB) — not htmx.org. Same hx-* namespace. Drop-in replacement. Read the seed →

1. Basic GET + Swap

Click the button. It fires hx-get, fetches an HTML fragment, and swaps it into the target.

Response will appear here

2. Self-Replacing Counter

Each click fetches a new fragment that replaces the entire counter via hx-swap="outerHTML". The new fragment contains the next button — dynamic content with hx-* attributes, auto-processed after swap.

3. Live Search (Debounced)

Type to search. Uses hx-trigger="keyup changed delay:300ms" — debounces 300ms, only fires when the value actually changes.

4. Form POST

Submit the form. Uses hx-post to send FormData and swap the response.

5. Polling (Auto-refresh)

The time below refreshes every 2 seconds via hx-trigger="load, every 2s".