DEV Community

Cover image for Django, HTMX and Alpine.JS: A Match Made In Heaven

Django, HTMX and Alpine.JS: A Match Made In Heaven

arcanemachine on June 06, 2021

If you want to see HTMX and Alpine.JS in action together, click here to see a basic project I put together while using the two. Contact Moen Digit...
Collapse
 
adamghill profile image
Adam Hill •

Nice write up! One small package to make integrating Django with HTMX a little easier is pypi.org/project/django-htmx/.

Collapse
 
ericlecodeur profile image
Eric Le Codeur •

Handy... Thanks for sharing.

Collapse
 
souksyp profile image
Souk Syp. •

Htmx deserves more post like this. If you come from backend, it just makes your life easier.

Collapse
 
ericlecodeur profile image
Eric Le Codeur •

Great Post. I use HTMX and Alpine.js on almost all my Django project for the last year. HTMX deserve lot more publicity because they are awesome!

Collapse
 
preslavrachev profile image
Preslav Rachev •

Can you also listen for HTMX events using Alpine? Something like @htmx:responseError="... handle the error on the client" is what I am looking for, but apprently, this won't work.

Collapse
 
nicholas_moen profile image
arcanemachine •

Finally dug into this a bit. It appears that htmx:responseError is not fired on the element. However, htmx:error does fire, so I was able to do something like the following:

@htmx:error="(evt) => myHtmxErrorFunction(evt)"

This generic error event is currently undocumented, and I need to dig a little more to find out what events are dispatched to the element.

I think HTMX will need a PR or two in order to get things to make sense. htmx:sendError and htmx:responseError should definitely be fired on the elemtn.

Collapse
 
nicholas_moen profile image
arcanemachine •

Off the top of my head, I cannot currently remember. Try asking in reddit.com/r/htmx, the creator is pretty active there.

Collapse
 
jwing8 profile image
jwing8 •

I am also trying to do this but cannot get it to work

Collapse
 
guzmanojero profile image
guzmanojero •

How do you compare this to Django Unicorn? django-unicorn.com/
Nice article, thanks

Collapse
 
nicholas_moen profile image
arcanemachine •

I haven’t used them together… This way, I’m not tied to a specific platform.

Collapse
 
jiraiyasennin profile image
Dostow**-> •

:-O I've just checked it, thanks for the info!!
(~˘▾˘)~

Collapse
 
mohammadekhosravi profile image
Mohammad •

This is interesting.

Collapse
 
jiraiyasennin profile image
Dostow**-> •

Amazing Article!! :D Thanks for sharing!