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!