Awesome
Django HTMX Components
This is a collection of components for Django and htmx. They are meant to be copy-pasted into your project and customized to your needs.
They're designed to be as simple as possible, so you can easily understand how they work and modify them to your needs. They have very little styling, for the same reason.
Installation
- Install Django and htmx.
- Install and set up django-compoenents
- Create a
urls.py
file incomponents/
and add the following code:
Then import this file in your project'sfrom django.urls import path urlpatterns = []
urls.py
file:
This step simplifies adding URL patterns for your components and keeps them separate from your project's URL patterns. Then, adding a single-file component to yourfrom django.urls import path, include urlpatterns = [ path('components/', include('components.urls')), ]
components/urls.py
file is as easy as:
It will handle requests tofrom django.urls import path from components.mycomponent import MyComponent urlpatterns = [ path('mycomponent/', MyComponent.as_view()), ]
/components/mycomponent/
and render the component. - Copy-paste the components you want to use into your
components/
folder. Add them to yourcomponents/urls.py
file as described above.
Contributing
Contributions are welcome! Please open an issue or pull request if you have a component you'd like to add or a bug to report.
Local development
- Clone this repository.
- Create a virtual environment and install the dependencies:
poetry install npm install
- Run the Tailwind CSS build:
make tailwind
- Start redis:
make redis
- Run the development server:
make run
- Open http://localhost:8000/ in your browser.
- Make your changes and test them in your browser.
- Commit your changes and open a pull request.
License
This project is licensed under the MIT License. See LICENSE for details.