Menu
Article Daily

How I write my UI components when using Htmx with Golang and templ; year two

Cijin Cherian

Cijin Cherian

• 2 min read

Last year I wrote a post about how I write my Templ UI components with HTMX. I came across that post as I was Googling something for Templ stuff. When I saw that it had been a year since I wrote it, I thought I should write a sequel. Especially since I've been finding it quite difficult to write consistently. So this one seemed like an easy win.

Things that have not changed:

  • The decode valid pattern is a win—you can check it in my last year's post. I still use it.
  • Still using TailwindCSS except for the upgrade to v4 which was released not too long ago
  • Probably more things, but I can't remember anything else that has stayed the same.

Using events

Once I got comfortable with events I got really excited and started using them quite a lot. It was fine, but I happened to find a better solution, mainly when handling error responses. As an example:

// handler.go
if err != nil {
  w.Header().Set("HX-Trigger", "error-notification")
}

// some-view.templ using alpinejs
templ ServerNotificationFailure() {
	<div
		x-data="{
        notifications: [],
        addError() {
            this.notifications.push({
                id: Date.now(),
                content: 'Update failed'
            })
        },
        
		@error-notification.window="addError()"
		class="fixed top-0 right-0 flex w-full max-w-sm flex-col space-y-4 pr-4 pb-4 sm:justify-start z-10"
		role="status"
		aria-live="polite"
	>
		<template x-for="notification in notifications" key="notification.id">
           // toast html

There's syntactic sugar from AlpineJS that allows you to handle events by using @error-notification. I add it to my base layout and then any generic errors can use this listener on the UI to trigger toasts. Although I've revised this slightly and I have now upgraded to TemplUI which has its own Toast component. It allows me to provide better error messages. But I still use events any time a part of the page updates and some info on another part of the page needs updating.

Switching to Templ UI

Last month I decided to switch to Templ UI which was a good call. It helped me rely on the JavaScript from Templ UI which was a lot cleaner and more robust than mine. It's also helped me clean up my handlers and provide better error and success responses too. They also have a Pro version which I have signed up for and it has made my websites a lot better looking and interactive. It's also given me some insights on how to better structure my own UI elements.

I decided to switch from Franken UI despite it working well, mainly because of Templ UI and the Pro aspect. It worked better with my existing stack and I like that the dev who built Templ has a way to monetize what he's built. This gives me a lot more confidence in the long-term sustainability of the project.

Using SSE

I needed to set up some quick notifications for the site a few months ago. Turns out HTMX has an SSE plugin for it. It's stupidly simple to use. Anytime a user has a notification and if they are online, it sends an event to a notification component that listens for these SSE events and then requests the server for notifications. It's so simple that I was surprised when I got it to work over a weekend. I need to update my base project to include Templ UI, TailwindCSS v4 and SSE. I'll write a detailed how-to on it if anyone is interested.

I think that's mostly it. A lot of the things have stayed the same. Surprisingly, my React experience from the past was quite useful in helping me better structure the UI, which even now is the part that takes up the most time. Working with Go on the server is a breeze. At the same time, working with Templ and HTMX has increased my appreciation for programming UI—I might go as far as to say that I'm actually quite enjoying it.

Share