Django class-based views for HTMX-powered Bootstrap modals
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Project description
Django Htmx Modal Forms
Documentation: https://django-htmx-modal-forms.readthedocs.io
Source Code: https://github.com/abe-101/django-htmx-modal-forms
A Django package that provides class-based views for handling forms in Bootstrap modals using HTMX. This package makes it easy to add create and update functionality to your Django models with a clean modal interface.
Features
- 🚀 Easy-to-use class-based views for modal forms
- ⚡ HTMX-powered for dynamic updates without page reloads
- 🎨 Bootstrap modal integration with customizable sizes
- ✨ Automatic form validation with error handling
- 🔄 Out-of-band updates for seamless UX
- 🐛 Debug mode for development
- 📱 Mobile-friendly and responsive
Requirements
- Python 3.8+
- Django 4.2+
- django-htmx
- Bootstrap 5
- django-crispy-forms
Installation
- Install via pip:
pip install django-htmx-modal-forms
- Add to your
INSTALLED_APPS:
INSTALLED_APPS = [
...
"crispy_forms",
"django_htmx_modal_forms",
]
- Load and include the JavaScript in your base template:
{% load htmx_modal_forms %}
<!doctype html>
<html>
<head>
<!-- Required dependencies -->
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/htmx.min.js' %}"></script>
<!-- Modal handlers -->
{% htmx_modal_script %}
</head>
<body>
<!-- Your content -->
</body>
</html>
Quick Start
- Create your view:
from django_htmx_modal_forms import HtmxModalUpdateView
class PersonUpdateView(HtmxModalUpdateView):
model = Person
form_class = PersonForm
detail_template_name = "persons/_person_card.html"
modal_size = "lg" # Optional: sm, lg, or xl
- Add the URL pattern:
path("persons/<int:pk>/edit/", PersonUpdateView.as_view(), name="person_update"),
- Create your detail template (
_person_card.html):
<div id="person-{{ person.id }}" class="card">
<div class="card-body">
<h5 class="card-title">{{ person.name }}</h5>
<p class="card-text">{{ person.email }}</p>
</div>
</div>
- Add a button to trigger the modal:
<button
hx-get="{% url 'person_update' pk=person.pk %}"
hx-target="body"
hx-swap="beforeend"
class="btn btn-primary"
>
Edit Person
</button>
That's it! When you click the edit button, a modal will appear with your form. On successful submission, the person's card will automatically update with the new information.
Advanced Usage
Custom Modal Titles
class PersonCreateView(HtmxModalCreateView):
model = Person
form_class = PersonForm
modal_title = "Add New Team Member" # Custom title
Different Modal Sizes
class PersonUpdateView(HtmxModalUpdateView):
model = Person
form_class = PersonForm
modal_size = "xl" # Available: sm, lg, xl
Debug Mode
Debug mode is automatically enabled when settings.DEBUG = True. It provides helpful console logging for:
- Modal initialization
- Event triggers
- Bootstrap/HTMX availability
- Error conditions
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. To develop locally:
- Clone the repository
- Install dependencies:
uv sync - Run tests:
uv run pytest
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Abe Hanoka 💻 🤔 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Credits
This package was created with Copier and the browniebroke/pypackage-template project template.
Project details
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django_htmx_modal_forms-0.1.0.tar.gz.
File metadata
- Download URL: django_htmx_modal_forms-0.1.0.tar.gz
- Upload date:
- Size: 13.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.0.1 CPython/3.12.8
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
00afd08544de028dcec59fdcbd1d02d7b9cb9b9255b489fe4427c18bff198d82
|
|
| MD5 |
83e40179a319f27b1c4d8cba1c02c8d2
|
|
| BLAKE2b-256 |
d3882ac4ed5a0e8568801ae90c9b9c0958cf848cb89cdf504cbf496d30cb3eaa
|
Provenance
The following attestation bundles were made for django_htmx_modal_forms-0.1.0.tar.gz:
Publisher:
ci.yml on abe-101/django-htmx-modal-forms
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
django_htmx_modal_forms-0.1.0.tar.gz -
Subject digest:
00afd08544de028dcec59fdcbd1d02d7b9cb9b9255b489fe4427c18bff198d82 - Sigstore transparency entry: 157830190
- Sigstore integration time:
-
Permalink:
abe-101/django-htmx-modal-forms@78c01fc800a472ba04dff251bc54355de2f74619 -
Branch / Tag:
refs/heads/main - Owner: https://github.com/abe-101
-
Access:
public
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
ci.yml@78c01fc800a472ba04dff251bc54355de2f74619 -
Trigger Event:
push
-
Statement type:
File details
Details for the file django_htmx_modal_forms-0.1.0-py3-none-any.whl.
File metadata
- Download URL: django_htmx_modal_forms-0.1.0-py3-none-any.whl
- Upload date:
- Size: 9.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.0.1 CPython/3.12.8
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
95f20ff29373f54011c543de28219b652d6b5376bc59265c6ed57fc2cce4f302
|
|
| MD5 |
61bc348db803d4ec5397d54739928362
|
|
| BLAKE2b-256 |
9414e50811125f0e52a7b19303ed72696cb9c8984ec505e181f8a75985529bdb
|
Provenance
The following attestation bundles were made for django_htmx_modal_forms-0.1.0-py3-none-any.whl:
Publisher:
ci.yml on abe-101/django-htmx-modal-forms
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
django_htmx_modal_forms-0.1.0-py3-none-any.whl -
Subject digest:
95f20ff29373f54011c543de28219b652d6b5376bc59265c6ed57fc2cce4f302 - Sigstore transparency entry: 157830191
- Sigstore integration time:
-
Permalink:
abe-101/django-htmx-modal-forms@78c01fc800a472ba04dff251bc54355de2f74619 -
Branch / Tag:
refs/heads/main - Owner: https://github.com/abe-101
-
Access:
public
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
ci.yml@78c01fc800a472ba04dff251bc54355de2f74619 -
Trigger Event:
push
-
Statement type:
