Trigger htmx events with Hono middleware

htmx has some great utilites that can help you create some event driven functionality in your application. With htmx, you can “send” an event an that will be triggered on the client side from the server. This use case came up recently in one of my projects and I wanted to share a helpful pattern to trigger events when sending requests to certain endpoints on specific actions using Hono.

The event-triggering middleware

To trigger an event on the client, the server needs to responed with the HX-Trigger header set to the value of the event you want to trigger. We can, of course, set the response header before returning the response from each route that will trigger an event, but that seems repetitive and easy to miss.

I wanted to keep it clean and general, so I created a function that will return a middleware.

function triggerEvent(event: string) {
	return async function (c: Context<{ Bindings: Bindings }>, next: Next) {
		await next();
		c.header("HX-Trigger", event);
	};
}

Chaining the route

I wanted to trigger an event on a route and an action. This can now be used as follows:

router
    .get('/table', (c) => c.html('...')
    .post(triggerEvent('tableUpdated'))
    .post(async (c) => {
        // update table ...
        return c.html('...')
    })

I found that this pattern, when used with Hono’s route chaining abilities, makes the code a little more descriptive. Here a /table route is defined, where a POST request will trigger the tableUpdated event, but a GET request will not.

In my case, the tabledUpdate event will trigger an request to get some table items. The same middleware can be used as such:

router.use("/table", triggerEvent("tableUpdated"));

However, that would have issued some unecessary request whenever a GET request was issued to the route.

Over in one client side, you would have something like this:

<table hx-get="/table" hx-trigger="tableUpdated from:body">
	...
</table>

This is just one small example of what kind of event driven capabilities are possible, though htmx comes with many builtin events you can hook into. I hope you find this helpful and thanks for reading!