Published on

Atomic Design with Templ, HTMX, Alpine.js and Tailwind

Two years ago I had my first contact with Golang. I used it for microfrontends in which I generated SSR components for React using Golang and the V8 engine (before React Server Components appeared). Golang served the frontend with data. I was building a large European e-commerce this way, but as it happens in such situations - after some time I knew that I could do some things better.

Over the last few months, I've been experimenting with Golang in a completely different way in my free time. I assumed that since various types of libraries and frameworks, originally used only to build the data presentation layer, want to be more and more backend-oriented (Nuxt, Next), maybe I will do the opposite and use something backend to replace the frontend. At first, the idea just seemed like an interesting experiment, but the more things I started checking, the more I started to realize that it wouldn't be just fun.

What I did

Two months ago I finished the prototype of the design system in which:

  • components are rendered in Golang, using Templ and are built according to the Atomic Design approach;
  • on the presentation layer side there is Tailwind, Alpine.js and HTMX;
  • there is no difference in the user interface compared to doing design systems in React or Vue.

As a result, I reached a point in the development of this idea where:

  • I have a very flexible, component-design system that can be used for monolithic architecture and microfrontends;
  • the efficiency and scalability of such a solution, e.g. for e-commerce in many contexts, may be surprising;
  • I am looking for extreme use cases in which "something cannot be done";


I used the approach described in one of the my previous post Extended Atomic Design structure and i have almost the same components published in Riupress UI.

Let's see how code looks like - below are some examples of component notation.

// Simple Avatar
        Path: "",
        Size: "sm", 
        Alt: "Radosław Muszyński",
// Button with icon
        Rounded: true,
        Icononly: true,
        Light: true,
) {
// Modal
@molecules.Modal(&molecules.ModalBosons{}) {
    <div>Some content</div>
// Sample input with validation
@atoms.FormField(&atoms.FormFieldBosons{}) {
    @atoms.FormLabel(&atoms.FormLabelBosons{Text: "Text in label:"})
    @atoms.FormInputField(&atoms.FormInputFieldBosons{}) {
    @atoms.FormValid(&atoms.FormValidBosons{Info: "This value will be using by us"})

What's next?

Finally, in the coming weeks I will present a fully functional demo (probably of some simple online store) based on the above solutions and I will see in which direction this concept will evolve further. Regardless, I want to say that despite almost 20 years of experience in software development, it still happens that I am as happy as a child with what I do in life thanks to such projects.

IIf you are interested in my project or want a similar solution in your project - write to me! Let's talk!

This page use cookies. Using the page means their acceptation. Check my Privacy Policy

© 2023 Riupress Radosław Muszyński. All rights reserved.