Hypermedia foundations

Make the first request

Turn a button click into a GET request and replace the button contents with the returned HTML.

8 minute lesson

~~~

Start with one request attribute:

<button hx-get="/hello">Load greeting</button>

A click sends this ordinary HTTP request:

GET /hello
HX-Request: true

Make the server return a fragment, not JSON:

<strong>Hello from the server</strong>

With no other attributes, the button is both the trigger and target. HTMX uses innerHTML, so it keeps the <button> and replaces its children:

<button hx-get="/hello">
  <strong>Hello from the server</strong>
</button>

The server is responsible for the response content. HTMX does not infer a template from data and does not know what a greeting means.

Try the exchange with DevTools open. Confirm the click creates one GET, inspect the HX-Request header, read the response as HTML, and compare it with the resulting DOM. That evidence gives you the complete loop: event, request, response, target, and swap.

Lesson completed