Skip to content

Latest commit

 

History

History
42 lines (28 loc) · 1.75 KB

README.md

File metadata and controls

42 lines (28 loc) · 1.75 KB

Django+HTMX: integration with the messages framework

This repository demonstrates how to use Django's messages framework with HTMX.

This branch shows the HX-Trigger technique, you can find the "OOB swap" technique in the oob branch.

Django+HTMX: integration with the messages framework

How to run the demo?

pipenv install
pipenv run server

(No need to run migrate since this project doesn't use the database)

How does it work?

Here are the two important pieces of this puzzle:

  1. HtmxMessageMiddleware takes the messages and puts them in the HX-Trigger header
  2. toast.js listens to the messages event and shows the messages as toasts.

📺 See the tutorial on YouTube 📺

📰 Read the article on my blog 📰

How to use this in your project?

  1. Run pip install git+https://github.com/bblanchon/django-htmx-messages-framework.git to install the package
  2. Add htmx_messages to the INSTALLED_APPS setting
  3. Add htmx_messages.middleware.HtmxMessageMiddleware to the MIDDLEWARE settings
  4. Add {% include 'toast.html' %} near the end of <body>
  5. Add <script src="{% static 'toast.js' %}"></script> as the last element of <body>

The files toast.html and toast.js are tailored for Bootstrap 5; you'll have to modify them to suit your needs.