Hypermedia, not JSON

In a SPA, the server speaks JSON and the client rebuilds the DOM from it. A hypermedia app deletes that translation layer: the server responds with HTML, and htmx swaps it into the page. Your Go handler renders the exact markup the user will see — there is no client-side data model to keep in sync, because there is no client-side data model.

htmx is one script tag plus attributes. Here's the page the initial GET returns:

<script src="/static/htmx.min.js"></script>

<form hx-post="/todos" hx-target="#list" hx-swap="beforeend">
  <input name="title" placeholder="What needs doing?">
  <button>Add</button>
</form>
<ul id="list">
  <li>Learn hypermedia</li>
</ul>

Four attributes carry most of htmx:

• hx-get / hx-post — the verb and URL to hit when the element triggers (a form triggers on submit, a button on click).
• hx-target — a CSS selector for where the response lands. Default: the element that made the request.
• hx-swap — how it lands: innerHTML (default), outerHTML, beforeend, afterbegin, delete, and friends.

Submitting that form POSTs title as regular form data — and the handler answers with one <li>:

mux.HandleFunc("POST /todos", func(w http.ResponseWriter, r *http.Request) {
    todo := store.Add(r.FormValue("title"))
    // The entire response body: one list item. Not JSON. Not a page.
    tmpl.ExecuteTemplate(w, "todo-item", todo)
})

htmx appends it inside #list (beforeend), and the page is up to date. Same net/http, same Go 1.22 ServeMux patterns as the previous course — only the response body changed dialect.

The challenge models the whole loop in JS: a fake server whose routes return HTML-fragment strings, and a tiny hx-swap simulator that patches a "DOM" string.

Next: those fragments shouldn't be hand-built strings — html/template renders full pages and fragments from one set of partials, with XSS escaping for free.