HTML as the engine. htmx lets any element issue AJAX requests and swap the returned HTML straight into the page — interactivity without writing JavaScript.
The button issues a real GET request to a partial HTML file and swaps the response into the target. These demos use real htmx fetching real files from this folder.
⚠︎ Fetching files requires opening this page over http(s) (e.g. a local server), not via file://
<button hx-get="_htmx-quote.html" hx-target="#quote-target" hx-swap="innerHTML"> Load a quote </button> <div id="quote-target"></div>
Same pattern, returning a list fragment. htmx doesn't care what HTML comes back — it just swaps it in.
<button hx-get="_htmx-list.html" hx-target="#list-target"> Load orders </button>
Triggers decide when a request fires. Here hx-trigger="load" fetches a fragment automatically as soon as the element appears — no click needed.
<div hx-get="_htmx-time.html" hx-trigger="load"> loading on its own… </div>
The same fetched fragment, three ways: innerHTML replaces the contents, beforeend appends, and outerHTML replaces the whole element. Click to compare.
<button hx-get="_htmx-time.html" hx-swap="innerHTML">…</button> <button hx-get="_htmx-time.html" hx-swap="beforeend">…</button>
hx-get and swap the responses using hx-target/hx-swap/hx-trigger. They fetch real fragment files created alongside this page — _htmx-quote.html, _htmx-list.html and _htmx-time.html. Note: fetching requires serving over http(s); opening via file:// blocks the requests. The shared CSS shell provides page styling.