django-tailwind-alpine-htmx
django-htmx
django-tailwind-alpine-htmx | django-htmx | |
---|---|---|
3 | 18 | |
55 | 1,404 | |
- | - | |
0.0 | 8.6 | |
11 months ago | 7 days ago | |
JavaScript | JavaScript | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
django-tailwind-alpine-htmx
-
Django Learning 2023
I didn't follow any specific tutorial but there is one resource that was most helpful for me: https://github.com/AccordBox/django-tailwind-alpine-htmx It helped me see that you can have all your javascript in one place in an organized manner. That's when I decided to add Vite. If you follow this carefully, you should be able to set up Django with Vite and use it conveniently.
-
Advice on building a portfolio project website?
You can check my tutorial series https://www.accordbox.com/blog/django-tailwind-css-alpinejs-tutorial/
-
Recommendations for combining the power of Django with the dynamic feeling of Javascript (SPAs)
You can use Alpine.js + HTMX + Tailwind CSS https://github.com/AccordBox/django-tailwind-alpine-htmx
django-htmx
- Django + Htmx package for simple integration
-
Disabling HTMX Urls
If you don't already, you should use django-htmx. This will allow you to check if the request was made with HTMX. You can then do something like this:
-
HTMX and Wagtail
To make things easier, install the django-htmx package. Then, in your Page model's serve(), you can do things like if request.htmx: and return an HTML snippet instead of the full page in that case.
-
Htmx
The great thing about HTMX is it fits really nicely with templated server-rendered frameworks like Django.
You can have a page with a list of items. The page is one template, and it includes a sub-template which is just the
- items. Then you have a separate view for "get list fragment" which just returns the updated/sorted/filtered
- . If you toggle the ordering, or filter the list, HTMX will automatically call the fragment renderer and replace just the
- items, without reloading the page.
See this example: https://github.com/adamchainz/django-htmx/blob/8054f049f53f0...
This approach solves the common interactivity use-cases requiring JS in a server-rendered app, without having to write any JS, and without having to build a REST API. Instead you just render HTML, which your framework is excellent at.
-
Building a fullstack app with Flask and HTMx
If you use django-htmx, it's pretty simple to get the "this HTTP request came from HTMX" flag and branch accordingly in your view. The docs give a simple example of the logic here:
https://django-htmx.readthedocs.io/en/latest/middleware.html...
The examples give a fleshed-out version: https://github.com/adamchainz/django-htmx/blob/main/example/...
Though that's very slightly different than how I described it above, but it's basically the same idea; in this case you commonize the `main` block between the two contexts.
-
Django Contrib Messages + HTMX ?
HTMX has a HX-Trigger response header that enables you to trigger events in the browser that Javascript code can listen for. Assuming you already have Django-HTMX library set up, you could write a middleware like this:
-
What are your favorite 3rd party packages that you often use with Django?
Nice. I've written some less complete, less consistent variant of this a couple times now. That alone may be worth taking the dependency.
-
Is HTMX a Django-supported equivalent of Rails Hotwire / Turbo?
Full URL for django-htmx: https://github.com/adamchainz/django-htmx (creator here)
-
Frontend with Django
I think it's fair to clarify that Adam Johnson (aka adamchainz on Reddit and GitHub) didn't create HTMX but did write the django-htmx app to make it easier to use HTMX in Django.
-
Django and hx-delete request verb
django-htmx also comes with it's own version of HttpResponseHtmxRedirect (called HttpResponseClientRedirect).
What are some alternatives?
fastify-starter - A starter for fastify with Twig, Tailwind, and Alpine, and HTMX.
django-unicorn - The magical reactive component framework for Django ✨
htmx - </> htmx - high power tools for HTML
pusher-js - Pusher Javascript library
reactor - Phoenix LiveView but for Django
turbo-django - Unmaintained // An early stage integration of Hotwire Turbo with Django
django-tailwind - Django + Tailwind CSS = 💚
clerk - Website used by new Anika clients to enter the facts of their case (backend)
django-vite - Integration of ViteJS in a Django project.
viewflow - Reusable workflow library for Django