djhtmx
Interactive UI Components for Django using htmx
Agent Skills
This repository is the home of three skills for coding agents: djhtmx-setup for wiring djhtmx into a project and its settings, djhtmx-components for writing components, and djhtmx-testing for testing them. Install them in your project with dotagents, so the guidance travels with the library instead of drifting in each consumer:
[[skills]]
name = "djhtmx-setup"
source = "edelvalle/djhtmx"
[[skills]]
name = "djhtmx-components"
source = "edelvalle/djhtmx"
[[skills]]
name = "djhtmx-testing"
source = "edelvalle/djhtmx"
They describe djhtmx alone; the conventions of your own project belong in a skill of your own that points at these.
Install
uv add djhtmx
or
pip install djhtmx
Configuration
djhtmx needs Redis running for component state, and five things wired:
INSTALLED_APPS = [
...,
"djhtmx",
]
# Last, so its exception hook runs first.
MIDDLEWARE = [
...,
"djhtmx.middleware",
]
TEMPLATES = [{
...,
"OPTIONS": {"context_processors": [
...,
"django.template.context_processors.request",
"djhtmx.context.component_repo",
]},
}]
# urls.py -- the prefix is yours
urlpatterns = [
...,
path("_htmx/", include("djhtmx.urls")),
]
{# the base template #}
{% load htmx %}
<!doctype html>
<html>
<head>
{% htmx-headers %}
</head>
</html>
DJHTMX_REDIS_URL defaults to redis://localhost/0. Every setting, what running server-sent events asks of the deployment, and what to look at when a component renders but does not respond are in the djhtmx-setup skill.
Getting started
djhtmx is a framework for building components, not a component library: it ships no components, templates or styles, and is unopinionated about all three.
Components are discovered in the htmx module -- or the htmx package -- of each installed app.
from djhtmx.component import HtmxComponent
class Counter(HtmxComponent):
_template_name = "Counter.html"
counter: int = 0
def inc(self, amount: int = 1):
self.counter += amount
The inc event handler is ready to be called from the front-end to respond to an event.
The counter.html would be:
{% load htmx %}
<div {% hx-tag %}>
{{ counter }}
<button {% on "inc" %}>+</button>
<button {% on "inc" amount=2 %}>+2</button>
</div>
When the event is dispatched to the back-end the component state is reconstructed, the event handler called and then the full component is rendered back to the front-end.
Now use the component in any of your html templates, by passing attributes that are part of the component state:
{% load htmx %}
Counters: <br />
{% htmx "Counter" %} Counter with init value 3:<br />
{% htmx "Counter" counter=3 %}
The djhtmx-components skill covers the rest -- state and model fields, handlers, events, model subscriptions, query-string state, rendering, SSE -- and djhtmx-testing covers testing components with djhtmx.testing.Htmx.
Release files for djhtmx 1.4.0
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | |
|---|---|---|---|
| djhtmx-1.4.0.tar.gz | 247.5 kB | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| djhtmx-1.4.0-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 504.5 kB
Release files / djhtmx-1.4.0.tar.gz
| Download URL | djhtmx-1.4.0.tar.gz |
|---|---|
| Size | 247.5 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
56efab3ddbaccae389e8ed63eeb6be0c8219c2c21cbcfd9a050049122cd6f6c4
|
|
BLAKE2b-256 checksum How to use checksums |
146cb6a1c8c06f412078431c193403558e4bf48c0b899e0d2790acbd726f2970
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.12.10 {"installer":{"name":"uv","version":"0.12.10","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Omarchy","version":"4.0.4","id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
Release files / djhtmx-1.4.0-py3-none-any.whl
| Download URL | djhtmx-1.4.0-py3-none-any.whl |
|---|---|
| Size | 256.9 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
0a5d4f599a3ab9e72e8708fb5cba9cef68833a40294ae5f9ac8fb6873d1a2ac9
|
|
BLAKE2b-256 checksum How to use checksums |
a73c98f83679a3a8970c7679cdc3fb57e573cdcd834f1294dfeb2a6d34f80151
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.12.10 {"installer":{"name":"uv","version":"0.12.10","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Omarchy","version":"4.0.4","id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
