HTMX + SSE: Easy updates of HTML state with no JavaScript

TL;DR: Synchronised state between multiple browser windows. With plain HTML + HTMX (SSE in the background). And no JavaScript or page reloading!

This is a video of synchronised instant updates across browser windows. Every time a checkbox is clicked, and updated to the server; an event is sent to the other browser window(s) and they update.

You can try it here (opens new tab) by opening multiple windows.

This is a re-post from my blog. It contains a lot of code examples that doesn’t format properly on Medium. Go there to read the whole entry.

This approach leverages server-sent events for real-time updates while keeping the front-end simple and declarative. While it may seem counter intuitive to those used to client-side state management, it offers a compelling alternative for many interactive web applications.

Read on to find out how you can implement this yourself. The front end part is simply HTML + HTMX and relevant for many, but the back end part is Kotlin specific. Concepts should be easily transferable to your favourite back end and language though.

If you are anxious to see the code you can find the Github repository here. Direct links to parts of the code is scattered throughout the article.

This is a re-post from my blog. It contains a lot of code examples that doesn’t format properly on Medium.

Go there to read the whole blogpost.