HTMX, AlpineJS and Django Messages - Adding Toast / Alert messages in HTMX Responses 

In this video, we'll look at how to integrate HTMX with Django's Messages Framework, and will add a toast message to our HTMX responses that displays feedback to users on particular actions.
Messages in Django are used to display flash messages on the page - one-time messages that give feedback to users.
We'll see how to use an HTMX Out-of-Band swap to swap in message content on Django responses. We'll style up our Toast / Alert with TailwindCSS, and we'll use AlpineJS to control display of these toasts.
We'll also see a cool trick with Alpine's x-init directive, where we use that to dismiss our toast message after a period of time has elapsed (for example, 2 seconds).
Starter Code (see 'final' branch): github.com/bugbytes-io/django...
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:47 Project Setup
03:32 Adding messages to Django views
05:48 Add TailwindCSS Toast template
10:10 Add toast partial as HTMX OOB swap in HTMX Response
13:09 Changing Toast Positioning with TailwindCSS
14:47 Adding Alpine.js component to dismiss toast
17:32 Using messages error method in Django view
18:42 Dismissing toast with setTimeout and x-init directive
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/django...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Starter Code: github.com/bugbytes-io/django...
Django Messages Framework: docs.djangoproject.com/en/4.1...
Tailwind Toast: flowbite.com/docs/components/...
AlpineJS Installation: alpinejs.dev/essentials/insta...
AlpineJS x-init: alpinejs.dev/directives/init
#django #python #htmx #alpinejs