Make the first request

With the library loaded, one attribute is enough for a complete round trip. Start with one request attribute:

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

hx-get declares two things at once: which HTTP method to use and which URL to request. When the button is clicked, HTMX issues the request in the background instead of navigating the page. A click sends this ordinary HTTP request:

GET /hello
HX-Request: true

There is nothing exotic in it. Any server that can answer a browser can answer this. The HX-Request: true header is the only hint that HTMX sent it, and the server can ignore that header entirely for now.

Make the server return a fragment, not JSON:

<strong>Hello from the server</strong>

This is the core habit to build. In a JSON-driven application the server returns data and the client renders it. Here the server returns the finished HTML, and HTMX’s job ends at placing it in the page.

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. If your endpoint returns JSON out of habit, HTMX still swaps it in, and you will see raw {"message": ...} text inside the button. That symptom means the response type is wrong, not the attribute.

Try the exchange with DevTools open. Confirm the click creates one GET on the Network panel, 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. Every HTMX feature in this course is a refinement of one of those five steps.