[trentnix]

I’ve been building a Golang web platform for my own web apps and I wired up toaster notifications using hx-swap-oob. I just populate a ‘notifications’ slice in my view model and hx-swap-oob makes sure my toaster messages get loaded irrespective of what content is actually being swapped.

It sounds like a similar use case to yours.

[ashwinsundar]

I have something similar setup for toast notifications in Django (Python). I have a notifications "partial" defined, which gets returned as part of an out-of-band swap by any view function that desires to use it. This includes other partials as well. It's how I chain fragment replacements together.

As an aside, I love that we can have this conversation - people in entirely different stacks can talk a similar language, through the glue of HTMX. This is why htmx is good for web development

[rorylaitila]

Gotcha, I think I looked at hx-swap-oob before for inspiration, but didn't see it working for this case, I'll look again.

[PenguinCoder]

Are you able to share the code you have for this? I have a similar need use case and using golang and Htmx for my app.

[trentnix]

I'll eventually make my repo public on Github, but I'm hesitant because it's still pretty half-baked. In the meantime, I'll do my best to capture the essentials. It's been a minute since I implemented it, so I apologize if I miss some details.

I use the same ViewModel structure for all renders, a struct called Content. It has a members to help with rendering and whatnot, and the data being rendered in my HTML template is stored in a Data type for the content that will be displayed:

  Data any

So whether I'm rendering complex data, a form, or just a snippet of text, that's where it lives. That allows for all sorts of patterns for rendering data and re-using templates if that's what you want to do. Or you can just keep things simple.

Hat-tip to the Pagoda framework, which was used sometimes as an inspiration and other times as a guideline for this (and other) patterns that I used. You can find it here: https://github.com/mikestefanello/pagoda

I also have, as part of my ViewModel, a `Notifications` slice that specifies messages to send to the user and their type:

  Notifications []messages.Notification

I have a HTML layout for my full page that includes a section that CSS uses to pick up notifications and display them via a toaster message:

  <div id="user-notifications" class="toaster-container">
    {{ range .Notifications }}
      <div class="toaster{{ if .IsSuccess }} success{{ else if .IsError }} error{{ end }}">
        {{ .Message }}
      </div>
    {{ end }}
  </div>

I managed to get it working without any need for JavaScript (other than what HTMX needs to work).

My partial renders use a layout that includes a section for the partially rendered code and my oob Notifications:

  {{ block "Content" . }}
      Loading content.
  {{ end }}

  <div id="user-notifications" class="toaster-container" hx-swap-oob="true">
      {{ range .Notifications }}
      <div class="toaster{{ if .IsSuccess }} success{{ else if .IsError }} error{{ end }}">
        {{ .Message }}
      </div>
    {{ end }}
  </div>

So the hx-swap-oob results in my user-notifications <div> being replaced with new notifications content, if there is any. I have a base renderer that handles injecting the layouts and injecting data into `Notifications`. As a result, my handlers can be generally oblivious that this is all happening underneath.

This model can work for updating links, updating breadcrumbs, writing messages to the console, or whatever.

I'm still scratching the surface with HTMX, but I'm convinced HTMX is perfectly appropriate and a much simpler alternative for 95% of the web dev being done today.