https://github.com/bblanchon/django-htmx-messages-framework

Django+HTMX: integration with the messages framework
https://github.com/bblanchon/django-htmx-messages-framework

django htmx

Last synced: 2 months ago
JSON representation

Django+HTMX: integration with the messages framework

• Host: GitHub
• URL: https://github.com/bblanchon/django-htmx-messages-framework
• Owner: bblanchon
• License: mit
• Created: 2022-09-12T12:51:04.000Z (over 2 years ago)
• Default Branch: hx-trigger
• Last Pushed: 2024-01-18T08:49:37.000Z (12 months ago)
• Last Synced: 2024-05-02T00:54:26.280Z (8 months ago)
• Topics: django, htmx
• Language: Python
• Homepage: https://blog.benoitblanchon.fr/django-htmx-messages-framework/
• Size: 1.36 MB
• Stars: 36
• Watchers: 6
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Django+HTMX: integration with the messages framework

===

This repository demonstrates how to use [Django's messages framework](https://docs.djangoproject.com/en/4.1/ref/contrib/messages/) with [HTMX](https://htmx.org/).

This branch shows the `HX-Trigger` technique, you can find the "OOB swap" technique in the [oob branch](https://github.com/bblanchon/django-htmx-messages-framework/tree/oob).



  

    

  



## 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](/htmx_messages/middleware.py) takes the messages and puts them in the `HX-Trigger` header

2. [toast.js](/htmx_messages/static/toasts.js) listens to the `messages` event and shows the messages as toasts.

:tv: **[See the tutorial on YouTube](https://youtu.be/I5_g7XYyemQ)** :tv:

:newspaper: [Read the article on my blog](https://blog.benoitblanchon.fr/django-htmx-messages-framework/) :newspaper: 

## How to use this in your project?

1. Run `pip install git+https://github.com/bblanchon/django-htmx-messages-framework.git@hx-trigger` 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 'toasts.html' %}` near the end of ``

5. Add `` as the last element of ``

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