Hypermedia foundations

What HTMX adds to HTML

See HTMX as a small extension to HTML that lets elements issue HTTP requests and use returned HTML.

8 minute lesson

~~~

HTML already has a useful application model: a link or form sends an HTTP request, and the server returns the next document. HTMX extends that model instead of replacing it.

It lets you answer five questions in markup:

<button
  hx-post="/tasks/42/complete"
  hx-trigger="click"
  hx-target="closest li"
  hx-swap="outerHTML">
  Complete
</button>
  • which event starts the interaction?
  • which HTTP method and URL should be used?
  • which element receives the response?
  • how is the returned HTML placed there?

The server handles the request and returns HTML representing the new task state. HTMX swaps that fragment into the list. There is no JSON response followed by a second template in the browser.

This works especially well when the server already owns validation, authorization, and rendering. It is less suitable when a feature must manipulate large amounts of local state without contacting the server.

Keep this cycle in mind for the whole course: event → HTTP request → HTML response → DOM swap. Every HTMX attribute changes one part of that cycle.

Lesson completed