Server-Driven Web Apps with htmx

Triggering Events

An endpoint can set the HX-Trigger response header to cause an event to be dispatched back in the browser when the response is received. The value of this header can be an event name or a JSON object containing a key that’s an event name and an arbitrary value. If a value is supplied, the client can find it in event.detail.value.

In the todo app, the POST endpoint that creates a new todo item contains code like the following:

c.header('HX-Trigger', 'status-change');

return c.html(<TodoItem todo={todo} />);

This causes a status-change custom event to be dispatched in the client. In addition, an HTML describing the new todo, generated by the function Todo, is returned. todo is a JavaScript object that describes ...