HX-Trigger ~ htmx

The HX-Trigger response header triggers client-side events when content is swapped.

Send a single event:


HX-Trigger: myEvent

Send multiple events:


HX-Trigger: event1, event2

Send event with detail:


HX-Trigger: {"showMessage":"Hello World"}

Handle the event:


document.body.addEventListener("showMessage", (evt) => {
    alert(evt.detail.value); // "Hello World"
});

Use hx-trigger to respond to server-triggered events:


<div hx-trigger="showMessage from:body" hx-get="/message"></div>