# djhtmx
[](https://github.com/edelvalle/djhtmx/actions/workflows/ci.yml)
[](https://codecov.io/gh/edelvalle/djhtmx)
Interactive UI Components for Django using [htmx](https://htmx.org)
## Install
```bash
uv add djhtmx
```
or
```bash
pip install djhtmx
```
# Configuration
Add `djhtmx` to your `INSTALLED_APPS`.
```python
INSTALLED_APPS = [
...
"djhtmx",
...
]
```
Install the Middleware as the last one of the list
```python
MIDDLEWARE = [
...,
"djhtmx.middleware",
]
```
Add `djhtmx.context.component_repo` to the list of context processors:
```python
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
...,
"djhtmx.context.component_repo",
],
},
},
]
```
Expose the HTTP endpoint in your `urls.py` as you wish, you can use any path you want.
```python
from django.urls import path, include
urlpatterns = [
# ...
path("_htmx/", include("djhtmx.urls")),
# ...
]
```
In your base template you need to load the necessary scripts to make this work
```html
{% load htmx %}
<!doctype html>
<html>
<head>
{% htmx-headers %}
</head>
</html>
```
## Getting started
This app will look for `htmx.py` files in your app and registers all components found there, but if you load any module where you have components manually when Django boots up, that also works.
```python
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:
```html
{% 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:
```html
{% load htmx %}
Counters: <br />
{% htmx "Counter" %} Counter with init value 3:<br />
{% htmx "Counter" counter=3 %}
```
## Doing more complicated stuff
### Authentication
All components have a `self.user` representing the current logged in user or `None` in case the user is anonymous. If you wanna make sure your user is properly validated and enforced. You need to create a base component and annotate the right user:
```python
from typing import Annotated
from pydantic import Field
from djhtmx.component import HtmxComponent
class BaseComponent(HtmxComponent, public=False):
user: Annotated[User, Field(exclude=True)]
class Counter(BaseComponent):
_template_name = "Counter.html"
counter: int = 0
def inc(self, amount: int = 1):
self.counter += amount
```
### Non-public components
These are components that can't be instantiated using `{% htmx "ComponentName" %}` because they are used to create some abstraction and reuse code.
Pass `public=False` in their declaration
```python
class BaseComponent(HtmxComponent, public=False):
...
```
## Component nesting
Components can contain components inside to decompose the behavior in more granular and specialized parts, for this you don't have to do anything but to a component inside the template of other component....
```python
class Items(HtmxComponent):
_template_name = "Items.html"
def items(self):
return Item.objects.all()
class ItemEntry(HtmxComponent):
...
item: Item
is_open: bool = False
...
```
`Items.html`:
```html
{% load htmx %}
<ul {% hx-tag %}>
{% for item in items %}
{% htmx "ItemEntry" item=item %}
{% endfor %}
</ul>
```
In this case every time there is a render of the parent component all children components will also be re-rendered.
How can you preserve the state in the child components if there were some of them that were already had `is_open = True`? The state that is not passed directly during instantiation to the component is retrieved from the session, but the component needs to have consistent id. To do this you have to pass an `id` to the component.
`Items.html`:
```html
{% load htmx %}
<ul {% hx-tag %}>
{% for item in items %}
{% htmx "ItemEntry" id="item-"|add:item.id item=item %}
{% endfor %}
</ul>
```
## Lazy lading
If you want some component to load lazily, you pass `lazy=True` where it is being instantiated.
`Items.html`:
```html
{% load htmx %}
<ul {% hx-tag %}>
{% for item in items %}
{% htmx "ItemEntry" id="item-"|add:item.id item=item lazy=True %}
{% endfor %}
</ul>
```
This makes the component to be initialized, but instead of rendering the template in `_template_name` the template defined in `_template_name_lazy` will be rendered (you can override this). When the component arrives to the front-end it will trigger an event to render it self.
## Implicit parameters
When sending an event to the back-end sometimes you can pass the parameters explicitly to the event handler, and sometimes these are inputs the user is typing stuff on. The value of those inputs are passed implicitly if they nave a `name="..."` attribute.
```python
class Component(HtmxComponent):
...
def create(self, name: str, is_active: bool = False):
Item.objects.create(name=name, is_active=is_active)
```
```html
{% load htmx %}
<form {% hx-tag %} {% on "submit" "create" %}>
<input type="text" name="name">
<input type="checkbox" name="is_active">
<button type="submit">Create!</button>
</form>
```
The parameters of any event handler are always converted by pydantic to the annotated types. It's suggested to properly annotate the event handler parameter with the more restrictive types you can.
### Data structures in implicit parameters
Suppose that you have a multiple choice list and you want to select multiple options, you can do this by suffixing the name with `[]` as in `choices[]`:
```python
class DeleteSelection(HtmxComponent):
@property
def items(self):
return self.filter(owner=self.user)
def delete(self, selected: list[UUID] | None = None):
if selected:
self.items.filter(id__in=selected).delete()
```
```html
{% load htmx %}
<form {% hx-tag %} {% on "submit" "delete" %}>
<h1>Select items to be deleted</h1>
{% for item in items %}
<p>
<input
type="checkbox"
name="selected[]"
value="{{ item.id }}"
id="checkbox-{{ item.id }}"
/>
<label for="checkbox-{{ item.id }}">{{ item.name}}</label>
</p>
{% endfor %}
<p><button type="submit">Delete selected</button></p>
</form>
```
## Commands
Each event handler in a component can yield commands for the library to execute. These are useful for skipping the default component render, redirecting the user, remove the component from the front-end, updating other components, and rendering components with custom context.
### Redirects
Wanna redirect the user to some object url:
- If you have the url directly you can `yield Redirect(url)`.
- If you want Django to resolve the url automatically use: `yield Redirect.to(obj, *args, **kwargs)` as you would use `django.shortcuts.resolve_url`.
```python
from djhtmx.component import HtmxComponent, Redirect
class Component(HtmxComponent):
...
def create(self, name: str):
item = Item.objects.create(name=name)
yield Redirect.to(item)
```
If you want to open the url in a new url use the `yield Open...` command with similar syntax to `Redirect`.
### Remove the current component from the interface
Sometimes you want to remove the component when it responds to an event, for that you need to `yield Destroy(component_id: str)`. You can also use this to remove any other component if you know their id.
```python
from djhtmx.component import HtmxComponent, Destroy
class Notification(HtmxComponent):
...
def close(self):
yield Destroy(self.id)
```
### Skip renders
Sometimes when reacting to a front-end event is handy to skip the default render of the current component, to achieve this do:
```python
from djhtmx.component import HtmxComponent, Redirect
class Component(HtmxComponent):
...
def do_something(self):
...
yield SkipRender(self)
```
### Partial Rendering
Sometimes you don't want to do a full component render, but a partial one. Specially if the user if typing somewhere to filter items and you don't wanna interfere with the user typing or focus. Here is the technique to do that:
```python
from djhtmx.component import HtmxComponent, Render
class SmartFilter(HtmxComponent):
_template_name = "SmartFilter.html"
query: str = ""
@property
def items(self):
items = Item.objects.all()
if self.query:
items = items.filter(name__icontains=self.query)
return items
def filter(self, query: str):
self.query = query.trim()
yield Render(self, template="SmartFilter_list.html")
```
`SmartFilter.html`:
```html
{% load htmx %}
<div {% hx-tag %}>
<input type="text" name="query" value="{{ query }}">
{% include "SmartFilter_list.html" %}
</div>
```
`SmartFilter_list.html`:
```html
<ul {% oob "list" %}>
{% for item in items %}
<li><a href="{{ item.get_absolute_url }}">{{ item }}</a></li>
{% empty %}
<li>Nothing found!</li>
{% endfor %}
</ul>
```
- Split the component in multiple templates, the main one and the partial ones.
- For readability prefix the name of the partials with the name of the parent.
- The partials need a single root HTML Element with an id and the `{% oob %}` tag next to it.
- When you wanna do the partial render you have to `yield Render(self, template=...)` with the name of the partial template, this will automatically skip the default full render and render the component with that partial template.
### Rendering with Custom Context
Sometimes you need to render a component with custom context data that differs from the component's state. The `Render` command supports an optional `context` parameter that allows you to override the component's context:
```python
from djhtmx.component import HtmxComponent, Render
class DataVisualization(HtmxComponent):
_template_name = "DataVisualization.html"
def show_filtered_data(self, filter_type: str):
# Get some custom data that's not part of component state
custom_data = self.get_filtered_data(filter_type)
# Render with custom context
yield Render(
self,
template="DataVisualization_filtered.html",
context={
"filtered_data": custom_data,
"filter_applied": filter_type,
"timestamp": datetime.now()
}
)
```
When using custom context:
- The provided context overrides the component's default context
- Essential HTMX variables (`htmx_repo`, `hx_oob`, `this`) are preserved
- The component's state remains unchanged - only the rendering context is modified
- This is particularly useful for displaying computed data, temporary states, or external data that shouldn't be part of the component's persistent state
## Query Parameters & State
Coming back to the previous example let's say that we want to persist the state of the `query` in the URL, so in case the user refreshes the page or shares the link the state of the component is partially restored. For do the following:
```python
from typing import Annotated
from djhtmx.component import HtmxComponent
from djhtmx.query import Query
class SmartFilter(HtmxComponent):
...
query: Annotated[str, Query("query")] = ""
...
```
Annotating with Query causes that if the state of the query is not explicitly passed to the component during instantiation it is taken from the query string of the current URL.
There can be multiple components subscribed to the same query parameter or to individual ones.
If you want now you can split this component in two, each with their own template:
```python
from typing import Annotated
from djhtmx.component import HtmxComponent, SkipRender
from djhtmx.query import Query
class SmartFilter(HtmxComponent):
_template_name = "SmartFilter.html"
query: Annotated[str, Query("query")] = ""
def filter(self, query: str):
self.query = query.trim()
yield SkipRender(self)
class SmartList(HtmxComponent):
_template_name = "SmartList.html"
query: Annotated[str, Query("query")] = ""
@property
def items(self):
items = Item.objects.all()
if self.query:
items = items.filter(name__icontains=self.query)
return items
```
Instantiate next to each other:
```html
<div>
...
{% htmx "SmartFilter" %}
{% htmx "SmartList" %}
...
</div>
```
When the filter mutates the `query`, the URL is updated and the `SmartList` is awaken because the both point to the same query parameter, and will be re-rendered.
## Signals
Sometimes you modify a model and you want not just the current component to react to this, but also trigger re-renders of other components that are not directly related to the current one. For this signals are very convenient. These are strings that represent topics you can subscribe a component to and make sure it is rendered in case any of the topics it subscribed to is triggered.
Signal formats:
- `app_label.modelname`: Some mutation happened to a model instance of this kind
- `app_label.modelname.instance_pk`: Some mutation happened to this precise instance of model
- `app_label.modelname.instance_pk.created`: This instance was created
- `app_label.modelname.instance_pk.updated`: This instance was updated
- `app_label.modelname.instance_pk.deleted`: This instance was deleted
When an instance is modified the mode specific and not so specific signals are triggered.
Together with them some other signals to related models are triggered.
Example: if we have a Todo list app with the models:
```python
class TodoList(Model):
...
class Item(Model):
todo_list = ForeignKey(TodoList, related_name="items")
```
And from the list with id `932` you take a item with id `123` and update it all this signals will be triggered:
- `todoapp.item`
- `todoapp.item.123`
- `todoapp.item.123.updated`
- `todoapp.todolist.932.items`
- `todoapp.todolist.932.items.updated`
### How to subscribe to signals
Let's say you wanna count how many items there are in certain Todo list, but your component does not receive an update when the list is updated because it is out of it. You can do this.
```python
from djhtmx.component import HtmxComponent
class ItemCounter(HtmxComponent):
todo_list: TodoList
def subscriptions(self):
return {
f"todoapp.todolist.{self.todo_list.id}.items.deleted",
f"todoapp.todolist.{self.todo_list.id}.items.created",
}
def count(self):
return self.todo_list.items.count()
```
This will make this component re-render every time an item is added or removed from the list `todo_list`.
## Dispatching Events between components
Sometimes is handy to notify components in the same session that something changed and they need to perform the corresponding update and `Query()` nor Signals are very convenient for this. In this case you can `Emit` events and listen to them.
Find here an implementation of `SmartFilter` and `SmartItem` using this mechanism:
```python
from dataclasses import dataclass
from djhtmx.component import HtmxComponent, SkipRender, Emit
@dataclass(slots=True)
class QueryChanged:
query: str
class SmartFilter(HtmxComponent):
_template_name = "SmartFilter.html"
query: str = ""
def filter(self, query: str):
self.query = query.trim()
yield Emit(QueryChanged(query))
yield SkipRender(self)
class SmartList(HtmxComponent):
_template_name = "SmartList.html"
query: str = ""
def _handle_event(self, event: QueryChanged):
self.query = event.query
@property
def items(self):
items = Item.objects.all()
if self.query:
items = items.filter(name__icontains=self.query)
return items
```
The library will look in all components if they define `_handle_event(event: ...)` and based on the annotation of `event` subscribe them to those events. This annotation can be a single type or a `Union` with multiple even types.
## Inserting a component somewhere
Let's say that we are making the TODO list app and we want that when a new item is added to the list there is not a full re-render of the whole list, just that the Component handling a single Item is added to the list.
```python
from djhtmx.component import HtmxComponent, SkipRender, BuildAndRender
class TodoListComponent(HtmxComponent):
_template_name = "TodoListComponent.html"
todo_list: TodoList
def create(self, name: str):
item = self.todo_list.items.create(name=name)
yield BuildAndRender.prepend(
f"#{self.id} .list",
ItemComponent,
id=f"item-{item.id}",
item=item,
)
yield SkipRender(self)
class ItemComponent(HtmxComponent):
...
item: Item
...
```
`TodoListComponent.html`:
```html
{% load htmx %}
<div {% hx-tag %}>
<form {% on "submit" "create" %}>
<input type="text" name="name">
</form>
<ul class="list">
{% for item in items %}
{% htmx "ItemComponent" id="item-"|add:item.id item=item %}
{% endfor %}
</ul>
</div>
```
Use the `BuildAndRender.<helper>(target: str, ...)` to send a component to be inserted somewhere or updated.
### Cascade Deletion
You can establish parent-child relationships so that when a parent component is destroyed, all its children are automatically destroyed recursively. This prevents memory leaks in complex component hierarchies.
#### Using BuildAndRender with parent_id
```python
class TodoListComponent(HtmxComponent):
def create(self, name: str):
item = self.todo_list.items.create(name=name)
# Child component that will be automatically destroyed when parent is destroyed
yield BuildAndRender.append(
"#todo-items",
ItemComponent,
parent_id=self.id, # Establishes parent-child relationship
id=f"item-{item.id}",
item=item
)
class Dashboard(HtmxComponent):
def show_modal(self):
# Modal becomes child of dashboard - destroyed when dashboard is destroyed
yield BuildAndRender.prepend("body", SettingsModal, parent_id=self.id)
```
#### Template Tag Automatic Tracking
When you use `{% htmx "ComponentName" %}` inside another component's template, parent-child relationships are automatically established:
```html
<!-- In TodoList.html template -->
{% load htmx %}
<div {% hx-tag %}>
{% for item in items %}
<!-- Each TodoItem automatically becomes a child of this TodoList -->
{% htmx "ItemComponent" id="item-"|add:item.id item=item %}
{% endfor %}
</div>
```
When the parent TodoList is destroyed, all child ItemComponent instances are automatically cleaned up.
#### Updating Components
Use `BuildAndRender.update()` to update existing components (preserves existing parent-child relationships):
```python
# Update existing component without changing relationships
yield BuildAndRender.update(SidebarWidget, data=sidebar_data)
```
## Focusing an item after render
Let's say we want to put the focus in an input that inside the new ItemComponent rendered, for this use `yield Focus(target)`
```python
from djhtmx.component import HtmxComponent, SkipRender, BuildAndRender, Focus
class TodoListComponent(HtmxComponent):
_template_name = "TodoListComponent.html"
todo_list: TodoList
def create(self, name: str):
item = self.todo_list.items.create(name=name)
item_id = f"item-{item.id}"
yield BuildAndRender.prepend(
f"{self.id} .list",
ItemComponent,
id=item_id,
item=item,
)
yield Focus(f"#{item_id} input")
yield SkipRender(self)
```
## Sending Events to the DOM
Suppose you have a rich JavaScript library (graphs, maps, or anything...) in the front-end and you want to communicate something to it because it is subscribed to some dome event. For that you can use `yield DispatchDOMEvent(target, event, detail, ....)`
```python
from djhtmx.component import HtmxComponent, DispatchDOMEvent
class TodoListComponent(HtmxComponent):
_template_name = "TodoListComponent.html"
todo_list: TodoList
def create(self, name: str):
item = self.todo_list.items.create(name=name)
yield DispatchDOMEvent(
"#leaflet-map",
"new-item",
{"id": item.id, "name": item.name, "geojson": item.geojson}
)
```
This will trigger that event in the front-end when the request arrives allowing rich JavaScript components to react accordingly without full re-render.
## Template Tags you should know about
- `{% htmx-headers %}`: put it inside your `<header></header>` to load the right scripts and configuration.
```html
<header>
{% htmx-headers %}
</header>
```
- `{% htmx <ComponentName: str> **kwargs %}`: instantiates and inserts the result of rendering that component with those initialization parameters.
```html
<div>
{% htmx 'Button' document=document name='Save Document' is_primary=True %}
</div>
```
- `{% hx-tag %}`: goes in the root HTML Element of a component template, it sets the component `id` and some other basic configuration details of the component.
```html
<button {% hx-tag %}>
...
</button>
```
- `{% oob <LocalId: str> %}`: goes in the root HTML Element of an element that will used for partial render (swapped Out Of Band). It sets the id of the element to a concatenation of the current component id and whatever you pass to it, and sets the right [hx-swap-oob](https://htmx.org/attributes/hx-swap-oob/) strategy.
```html
<div {% oob "dropdown" %} class="dropdown">
...
</div>
```
- `{% on <EventName: str> <EventHandler: str> **kwargs %}` binds the event handler using [hx-trigger](https://htmx.org/attributes/hx-trigger/) to an event handler in the component with certain explicit parameters. Implicit parameters are passed from anything that has a name attribute defined inside the component.
```html
<button {% on "click" "save" %}>
...
</button>
```
- `{% class <ClassName: str>: <BooleanExpr: bool>[, ...] %}` used inside of any html tag to set the class attribute, activating certain classes when corresponding boolean expression is `True`.
```html
<button {% class "btn": True, "btn-primary": is_primary %}>
...
</button>
```
## Testing
This library provides the class `djhtmx.testing.Htmx` which implements a very basic a dumb runtime for testing components. How to use:
```python
from django.test import Client, TestCase
from djhtmx.testing import Htmx
from .models import Item
class TestNormalRendering(TestCase):
def setUp(self):
Item.objects.create(text="First task")
Item.objects.create(text="Second task")
self.htmx = Htmx(Client())
def test_todo_app(self):
self.htmx.navigate_to("/todo")
[a, b] = self.htmx.select('[hx-name="TodoItem"] label')
self.assertEqual(a.text_content(), "First task")
self.assertEqual(b.text_content(), "Second task")
[count] = self.htmx.select(".todo-count")
self.assertEqual(count.text_content(), "2 items left")
# Add new item
self.htmx.type("input.new-todo", "3rd task")
self.htmx.trigger("input.new-todo")
[count] = self.htmx.select(".todo-count")
self.assertEqual(count.text_content(), "3 items left")
[a, b, c] = self.htmx.select('[hx-name="TodoItem"] label')
self.assertEqual(a.text_content(), "First task")
self.assertEqual(b.text_content(), "Second task")
self.assertEqual(c.text_content(), "3rd task")
```
### API
`Htmx(client: Client)`: pass a Django test client, that can be authenticated if that's required.
`htmx.navigate_to(url, *args, **kwargs)`: This is used to navigate to some url. It is a wrapper of `Client.get` that will retrieve the page and parse the HTML into `htmx.dom: lxml.html.HtmlElement` and create a component repository in `htmx.repo`.
#### Look-ups
`htmx.select(css_selector: str) -> list[lxml.html.HtmlElement]`: Pass some CSS selector here to retrieve nodes from the DOM, so you can modify them or perform assertions over them.
`htmx.find_by_text(text: str) -> lxml.html.HtmlElement`: Returns the first element that contains certain text.
`htmx.get_component_by_type(component_type: type[THtmxComponent]) -> THtmxComponent`: Retrieves the only instance rendered of that component type in the current page. If there is more than one instance this fails.
`htmx.get_components_by_type(component_type: type[THtmxComponent]) -> list[THtmxComponent]`: Retrieves all instances of this component type in the current page.
`htmx.get_component_by_id(component_id: str) -> THtmxComponent`: Retrieves a component by its id from the current page.
#### Interactions
`htmx.type(selector: str | html.HtmlElement, text: str, clear=False)`: This simulates typing in an input or text area. If `clear=True` it clears it replaces the current text in it.
`htmx.trigger(selector: str | html.HtmlElement)`: This triggers whatever event is bound in the selected element and returns after all side effects had been processed.
```python
self.htmx.type("input.new-todo", "3rd task")
self.htmx.trigger("input.new-todo")
```
`htmx.send(method: Callable[P, Any], *args: P.args, **kwargs: P.kwargs)`: This sends the runtime to execute that a bound method of a HtmxComponent and returns after all side effects had been processed. Use as in:
```python
todo_list = htmx.get_component_by_type(TodoList)
htmx.send(todo_list.new_item, text="New todo item")
```
`htmx.dispatch_event(self, component_id: str, event_handler: str, kwargs: dict[str, Any])`: Similar to `htmx.send`, but you don't need the instance, you just need to know its id.
```python
htmx.dispatch_event("#todo-list", "new_item", {"text": "New todo item"})
```
Raw data
{
"_id": null,
"home_page": null,
"name": "djhtmx",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.11",
"maintainer_email": null,
"keywords": "django, htmx, liveview, reactive, real-time, spa, websockets",
"author": null,
"author_email": "Eddy Ernesto del Valle Pino <eddy@edelvalle.me>",
"download_url": "https://files.pythonhosted.org/packages/1d/ec/97f112be19337586d9c8c777ed72e112c0a0d3e7814a9fcc7ecff59e3910/djhtmx-1.1.1.tar.gz",
"platform": null,
"description": "# djhtmx\n\n[](https://github.com/edelvalle/djhtmx/actions/workflows/ci.yml)\n[](https://codecov.io/gh/edelvalle/djhtmx)\n\nInteractive UI Components for Django using [htmx](https://htmx.org)\n\n## Install\n\n```bash\nuv add djhtmx\n```\n\nor \n\n```bash\npip install djhtmx\n```\n\n# Configuration\n\nAdd `djhtmx` to your `INSTALLED_APPS`.\n\n```python\nINSTALLED_APPS = [\n ...\n \"djhtmx\",\n ...\n]\n```\n\nInstall the Middleware as the last one of the list \n\n```python\nMIDDLEWARE = [\n ...,\n \"djhtmx.middleware\",\n]\n```\n\nAdd `djhtmx.context.component_repo` to the list of context processors:\n\n```python\nTEMPLATES = [\n {\n \"BACKEND\": \"django.template.backends.django.DjangoTemplates\",\n \"DIRS\": [],\n \"APP_DIRS\": True,\n \"OPTIONS\": {\n \"context_processors\": [\n ...,\n \"djhtmx.context.component_repo\",\n ],\n },\n },\n]\n\n```\n\nExpose the HTTP endpoint in your `urls.py` as you wish, you can use any path you want.\n\n```python\nfrom django.urls import path, include\n\nurlpatterns = [\n # ...\n path(\"_htmx/\", include(\"djhtmx.urls\")),\n # ...\n]\n```\n\nIn your base template you need to load the necessary scripts to make this work\n\n```html\n{% load htmx %}\n<!doctype html>\n<html>\n <head>\n {% htmx-headers %}\n </head>\n</html>\n```\n\n## Getting started\n\nThis app will look for `htmx.py` files in your app and registers all components found there, but if you load any module where you have components manually when Django boots up, that also works.\n\n```python\nfrom djhtmx.component import HtmxComponent\n\n\nclass Counter(HtmxComponent):\n _template_name = \"Counter.html\"\n counter: int = 0\n\n def inc(self, amount: int = 1):\n self.counter += amount\n```\n\nThe `inc` event handler is ready to be called from the front-end to respond to an event.\n\nThe `counter.html` would be:\n\n```html\n{% load htmx %}\n<div {% hx-tag %}>\n {{ counter }}\n <button {% on \"inc\" %}>+</button>\n <button {% on \"inc\" amount=2 %}>+2</button>\n</div>\n```\n\nWhen 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.\n\nNow use the component in any of your html templates, by passing attributes that are part of the component state:\n\n```html\n{% load htmx %}\n\nCounters: <br />\n{% htmx \"Counter\" %} Counter with init value 3:<br />\n{% htmx \"Counter\" counter=3 %}\n```\n\n## Doing more complicated stuff\n\n### Authentication\n\nAll components have a `self.user` representing the current logged in user or `None` in case the user is anonymous. If you wanna make sure your user is properly validated and enforced. You need to create a base component and annotate the right user:\n\n```python\nfrom typing import Annotated\nfrom pydantic import Field\nfrom djhtmx.component import HtmxComponent\n\nclass BaseComponent(HtmxComponent, public=False):\n user: Annotated[User, Field(exclude=True)]\n\n\nclass Counter(BaseComponent):\n _template_name = \"Counter.html\"\n counter: int = 0\n\n def inc(self, amount: int = 1):\n self.counter += amount\n```\n\n### Non-public components\n\nThese are components that can't be instantiated using `{% htmx \"ComponentName\" %}` because they are used to create some abstraction and reuse code.\n\nPass `public=False` in their declaration\n\n```python\nclass BaseComponent(HtmxComponent, public=False):\n ...\n```\n\n## Component nesting\n\nComponents can contain components inside to decompose the behavior in more granular and specialized parts, for this you don't have to do anything but to a component inside the template of other component....\n\n```python\nclass Items(HtmxComponent):\n _template_name = \"Items.html\"\n\n def items(self):\n return Item.objects.all()\n\nclass ItemEntry(HtmxComponent):\n ...\n item: Item\n is_open: bool = False\n ...\n```\n\n`Items.html`:\n\n```html\n{% load htmx %}\n\n<ul {% hx-tag %}>\n {% for item in items %}\n {% htmx \"ItemEntry\" item=item %}\n {% endfor %}\n</ul>\n```\n\nIn this case every time there is a render of the parent component all children components will also be re-rendered.\n\nHow can you preserve the state in the child components if there were some of them that were already had `is_open = True`? The state that is not passed directly during instantiation to the component is retrieved from the session, but the component needs to have consistent id. To do this you have to pass an `id` to the component.\n\n`Items.html`:\n\n```html\n{% load htmx %}\n\n<ul {% hx-tag %}>\n {% for item in items %}\n {% htmx \"ItemEntry\" id=\"item-\"|add:item.id item=item %}\n {% endfor %}\n</ul>\n```\n\n## Lazy lading\n\nIf you want some component to load lazily, you pass `lazy=True` where it is being instantiated.\n\n\n`Items.html`:\n\n```html\n{% load htmx %}\n\n<ul {% hx-tag %}>\n {% for item in items %}\n {% htmx \"ItemEntry\" id=\"item-\"|add:item.id item=item lazy=True %}\n {% endfor %}\n</ul>\n```\n\nThis makes the component to be initialized, but instead of rendering the template in `_template_name` the template defined in `_template_name_lazy` will be rendered (you can override this). When the component arrives to the front-end it will trigger an event to render it self.\n\n\n## Implicit parameters\n\nWhen sending an event to the back-end sometimes you can pass the parameters explicitly to the event handler, and sometimes these are inputs the user is typing stuff on. The value of those inputs are passed implicitly if they nave a `name=\"...\"` attribute.\n\n```python\nclass Component(HtmxComponent):\n ...\n\n def create(self, name: str, is_active: bool = False):\n Item.objects.create(name=name, is_active=is_active)\n\n```\n\n```html\n{% load htmx %}\n\n<form {% hx-tag %} {% on \"submit\" \"create\" %}>\n <input type=\"text\" name=\"name\">\n <input type=\"checkbox\" name=\"is_active\">\n <button type=\"submit\">Create!</button>\n</form>\n```\n\nThe parameters of any event handler are always converted by pydantic to the annotated types. It's suggested to properly annotate the event handler parameter with the more restrictive types you can.\n\n### Data structures in implicit parameters\n\nSuppose that you have a multiple choice list and you want to select multiple options, you can do this by suffixing the name with `[]` as in `choices[]`:\n\n```python\nclass DeleteSelection(HtmxComponent):\n\n @property\n def items(self):\n return self.filter(owner=self.user)\n\n def delete(self, selected: list[UUID] | None = None):\n if selected:\n self.items.filter(id__in=selected).delete()\n```\n\n```html\n{% load htmx %}\n\n<form {% hx-tag %} {% on \"submit\" \"delete\" %}>\n <h1>Select items to be deleted</h1>\n {% for item in items %}\n <p>\n <input\n type=\"checkbox\"\n name=\"selected[]\"\n value=\"{{ item.id }}\"\n id=\"checkbox-{{ item.id }}\"\n />\n <label for=\"checkbox-{{ item.id }}\">{{ item.name}}</label>\n\n </p>\n {% endfor %}\n <p><button type=\"submit\">Delete selected</button></p>\n</form>\n\n```\n\n\n## Commands\n\nEach event handler in a component can yield commands for the library to execute. These are useful for skipping the default component render, redirecting the user, remove the component from the front-end, updating other components, and rendering components with custom context.\n\n### Redirects\n\nWanna redirect the user to some object url:\n- If you have the url directly you can `yield Redirect(url)`.\n\n- If you want Django to resolve the url automatically use: `yield Redirect.to(obj, *args, **kwargs)` as you would use `django.shortcuts.resolve_url`.\n\n```python\nfrom djhtmx.component import HtmxComponent, Redirect\n\n\nclass Component(HtmxComponent):\n ...\n\n def create(self, name: str):\n item = Item.objects.create(name=name)\n yield Redirect.to(item)\n```\n\nIf you want to open the url in a new url use the `yield Open...` command with similar syntax to `Redirect`.\n\n### Remove the current component from the interface\n\nSometimes you want to remove the component when it responds to an event, for that you need to `yield Destroy(component_id: str)`. You can also use this to remove any other component if you know their id.\n\n```python\nfrom djhtmx.component import HtmxComponent, Destroy\n\n\nclass Notification(HtmxComponent):\n ...\n\n def close(self):\n yield Destroy(self.id)\n```\n\n### Skip renders\n\nSometimes when reacting to a front-end event is handy to skip the default render of the current component, to achieve this do:\n\n```python\nfrom djhtmx.component import HtmxComponent, Redirect\n\n\nclass Component(HtmxComponent):\n ...\n\n def do_something(self):\n ...\n yield SkipRender(self)\n```\n\n### Partial Rendering\n\nSometimes you don't want to do a full component render, but a partial one. Specially if the user if typing somewhere to filter items and you don't wanna interfere with the user typing or focus. Here is the technique to do that:\n\n```python\nfrom djhtmx.component import HtmxComponent, Render\n\nclass SmartFilter(HtmxComponent):\n _template_name = \"SmartFilter.html\"\n query: str = \"\"\n\n @property\n def items(self):\n items = Item.objects.all()\n if self.query:\n items = items.filter(name__icontains=self.query)\n return items\n\n def filter(self, query: str):\n self.query = query.trim()\n yield Render(self, template=\"SmartFilter_list.html\")\n```\n\n`SmartFilter.html`:\n\n```html\n{% load htmx %}\n\n<div {% hx-tag %}>\n <input type=\"text\" name=\"query\" value=\"{{ query }}\">\n {% include \"SmartFilter_list.html\" %}\n </div>\n```\n\n`SmartFilter_list.html`:\n\n```html\n<ul {% oob \"list\" %}>\n {% for item in items %}\n <li><a href=\"{{ item.get_absolute_url }}\">{{ item }}</a></li>\n {% empty %}\n <li>Nothing found!</li>\n {% endfor %}\n</ul>\n```\n\n- Split the component in multiple templates, the main one and the partial ones.\n- For readability prefix the name of the partials with the name of the parent.\n- The partials need a single root HTML Element with an id and the `{% oob %}` tag next to it.\n- When you wanna do the partial render you have to `yield Render(self, template=...)` with the name of the partial template, this will automatically skip the default full render and render the component with that partial template.\n\n### Rendering with Custom Context\n\nSometimes you need to render a component with custom context data that differs from the component's state. The `Render` command supports an optional `context` parameter that allows you to override the component's context:\n\n```python\nfrom djhtmx.component import HtmxComponent, Render\n\nclass DataVisualization(HtmxComponent):\n _template_name = \"DataVisualization.html\"\n \n def show_filtered_data(self, filter_type: str):\n # Get some custom data that's not part of component state\n custom_data = self.get_filtered_data(filter_type)\n \n # Render with custom context\n yield Render(\n self, \n template=\"DataVisualization_filtered.html\",\n context={\n \"filtered_data\": custom_data,\n \"filter_applied\": filter_type,\n \"timestamp\": datetime.now()\n }\n )\n```\n\nWhen using custom context:\n- The provided context overrides the component's default context\n- Essential HTMX variables (`htmx_repo`, `hx_oob`, `this`) are preserved\n- The component's state remains unchanged - only the rendering context is modified\n- This is particularly useful for displaying computed data, temporary states, or external data that shouldn't be part of the component's persistent state\n\n## Query Parameters & State\n\nComing back to the previous example let's say that we want to persist the state of the `query` in the URL, so in case the user refreshes the page or shares the link the state of the component is partially restored. For do the following:\n\n```python\nfrom typing import Annotated\nfrom djhtmx.component import HtmxComponent\nfrom djhtmx.query import Query\n\n\nclass SmartFilter(HtmxComponent):\n ...\n query: Annotated[str, Query(\"query\")] = \"\"\n ...\n```\n\nAnnotating with Query causes that if the state of the query is not explicitly passed to the component during instantiation it is taken from the query string of the current URL.\n\nThere can be multiple components subscribed to the same query parameter or to individual ones.\n\nIf you want now you can split this component in two, each with their own template:\n\n\n```python\nfrom typing import Annotated\nfrom djhtmx.component import HtmxComponent, SkipRender\nfrom djhtmx.query import Query\n\nclass SmartFilter(HtmxComponent):\n _template_name = \"SmartFilter.html\"\n query: Annotated[str, Query(\"query\")] = \"\"\n\n def filter(self, query: str):\n self.query = query.trim()\n yield SkipRender(self)\n\nclass SmartList(HtmxComponent):\n _template_name = \"SmartList.html\"\n query: Annotated[str, Query(\"query\")] = \"\"\n\n @property\n def items(self):\n items = Item.objects.all()\n if self.query:\n items = items.filter(name__icontains=self.query)\n return items\n```\n\nInstantiate next to each other:\n\n\n```html\n<div>\n ...\n {% htmx \"SmartFilter\" %}\n {% htmx \"SmartList\" %}\n ...\n</div>\n```\n\nWhen the filter mutates the `query`, the URL is updated and the `SmartList` is awaken because the both point to the same query parameter, and will be re-rendered.\n\n## Signals\n\nSometimes you modify a model and you want not just the current component to react to this, but also trigger re-renders of other components that are not directly related to the current one. For this signals are very convenient. These are strings that represent topics you can subscribe a component to and make sure it is rendered in case any of the topics it subscribed to is triggered.\n\nSignal formats:\n - `app_label.modelname`: Some mutation happened to a model instance of this kind\n - `app_label.modelname.instance_pk`: Some mutation happened to this precise instance of model\n - `app_label.modelname.instance_pk.created`: This instance was created\n - `app_label.modelname.instance_pk.updated`: This instance was updated\n - `app_label.modelname.instance_pk.deleted`: This instance was deleted\n\nWhen an instance is modified the mode specific and not so specific signals are triggered.\nTogether with them some other signals to related models are triggered.\n\nExample: if we have a Todo list app with the models:\n\n\n```python\nclass TodoList(Model):\n ...\n\nclass Item(Model):\n todo_list = ForeignKey(TodoList, related_name=\"items\")\n```\n\nAnd from the list with id `932` you take a item with id `123` and update it all this signals will be triggered:\n\n- `todoapp.item`\n- `todoapp.item.123`\n- `todoapp.item.123.updated`\n- `todoapp.todolist.932.items`\n- `todoapp.todolist.932.items.updated`\n\n\n### How to subscribe to signals\n\nLet's say you wanna count how many items there are in certain Todo list, but your component does not receive an update when the list is updated because it is out of it. You can do this.\n\n```python\nfrom djhtmx.component import HtmxComponent\n\nclass ItemCounter(HtmxComponent):\n todo_list: TodoList\n\n def subscriptions(self):\n return {\n f\"todoapp.todolist.{self.todo_list.id}.items.deleted\",\n f\"todoapp.todolist.{self.todo_list.id}.items.created\",\n }\n\n def count(self):\n return self.todo_list.items.count()\n```\n\nThis will make this component re-render every time an item is added or removed from the list `todo_list`.\n\n## Dispatching Events between components\n\nSometimes is handy to notify components in the same session that something changed and they need to perform the corresponding update and `Query()` nor Signals are very convenient for this. In this case you can `Emit` events and listen to them.\n\nFind here an implementation of `SmartFilter` and `SmartItem` using this mechanism:\n\n```python\nfrom dataclasses import dataclass\nfrom djhtmx.component import HtmxComponent, SkipRender, Emit\n\n\n@dataclass(slots=True)\nclass QueryChanged:\n query: str\n\n\nclass SmartFilter(HtmxComponent):\n _template_name = \"SmartFilter.html\"\n query: str = \"\"\n\n def filter(self, query: str):\n self.query = query.trim()\n yield Emit(QueryChanged(query))\n yield SkipRender(self)\n\nclass SmartList(HtmxComponent):\n _template_name = \"SmartList.html\"\n query: str = \"\"\n\n def _handle_event(self, event: QueryChanged):\n self.query = event.query\n\n @property\n def items(self):\n items = Item.objects.all()\n if self.query:\n items = items.filter(name__icontains=self.query)\n return items\n```\n\nThe library will look in all components if they define `_handle_event(event: ...)` and based on the annotation of `event` subscribe them to those events. This annotation can be a single type or a `Union` with multiple even types.\n\n## Inserting a component somewhere\n\nLet's say that we are making the TODO list app and we want that when a new item is added to the list there is not a full re-render of the whole list, just that the Component handling a single Item is added to the list.\n\n```python\nfrom djhtmx.component import HtmxComponent, SkipRender, BuildAndRender\n\nclass TodoListComponent(HtmxComponent):\n _template_name = \"TodoListComponent.html\"\n todo_list: TodoList\n\n def create(self, name: str):\n item = self.todo_list.items.create(name=name)\n yield BuildAndRender.prepend(\n f\"#{self.id} .list\",\n ItemComponent,\n id=f\"item-{item.id}\",\n item=item,\n )\n yield SkipRender(self)\n\nclass ItemComponent(HtmxComponent):\n ...\n item: Item\n ...\n```\n\n`TodoListComponent.html`:\n\n```html\n{% load htmx %}\n<div {% hx-tag %}>\n <form {% on \"submit\" \"create\" %}>\n <input type=\"text\" name=\"name\">\n </form>\n <ul class=\"list\">\n {% for item in items %}\n {% htmx \"ItemComponent\" id=\"item-\"|add:item.id item=item %}\n {% endfor %}\n </ul>\n</div>\n```\n\nUse the `BuildAndRender.<helper>(target: str, ...)` to send a component to be inserted somewhere or updated.\n\n### Cascade Deletion\n\nYou can establish parent-child relationships so that when a parent component is destroyed, all its children are automatically destroyed recursively. This prevents memory leaks in complex component hierarchies.\n\n#### Using BuildAndRender with parent_id\n\n```python\nclass TodoListComponent(HtmxComponent):\n def create(self, name: str):\n item = self.todo_list.items.create(name=name)\n # Child component that will be automatically destroyed when parent is destroyed\n yield BuildAndRender.append(\n \"#todo-items\", \n ItemComponent, \n parent_id=self.id, # Establishes parent-child relationship\n id=f\"item-{item.id}\",\n item=item\n )\n\nclass Dashboard(HtmxComponent):\n def show_modal(self):\n # Modal becomes child of dashboard - destroyed when dashboard is destroyed\n yield BuildAndRender.prepend(\"body\", SettingsModal, parent_id=self.id)\n```\n\n#### Template Tag Automatic Tracking\n\nWhen you use `{% htmx \"ComponentName\" %}` inside another component's template, parent-child relationships are automatically established:\n\n```html\n<!-- In TodoList.html template -->\n{% load htmx %}\n<div {% hx-tag %}>\n {% for item in items %}\n <!-- Each TodoItem automatically becomes a child of this TodoList -->\n {% htmx \"ItemComponent\" id=\"item-\"|add:item.id item=item %}\n {% endfor %}\n</div>\n```\n\nWhen the parent TodoList is destroyed, all child ItemComponent instances are automatically cleaned up.\n\n#### Updating Components\n\nUse `BuildAndRender.update()` to update existing components (preserves existing parent-child relationships):\n\n```python\n# Update existing component without changing relationships\nyield BuildAndRender.update(SidebarWidget, data=sidebar_data)\n```\n\n\n## Focusing an item after render\n\nLet's say we want to put the focus in an input that inside the new ItemComponent rendered, for this use `yield Focus(target)`\n\n```python\nfrom djhtmx.component import HtmxComponent, SkipRender, BuildAndRender, Focus\n\nclass TodoListComponent(HtmxComponent):\n _template_name = \"TodoListComponent.html\"\n todo_list: TodoList\n\n def create(self, name: str):\n item = self.todo_list.items.create(name=name)\n item_id = f\"item-{item.id}\"\n yield BuildAndRender.prepend(\n f\"{self.id} .list\",\n ItemComponent,\n id=item_id,\n item=item,\n )\n yield Focus(f\"#{item_id} input\")\n yield SkipRender(self)\n```\n\n## Sending Events to the DOM\n\nSuppose you have a rich JavaScript library (graphs, maps, or anything...) in the front-end and you want to communicate something to it because it is subscribed to some dome event. For that you can use `yield DispatchDOMEvent(target, event, detail, ....)`\n\n\n```python\nfrom djhtmx.component import HtmxComponent, DispatchDOMEvent\n\nclass TodoListComponent(HtmxComponent):\n _template_name = \"TodoListComponent.html\"\n todo_list: TodoList\n\n def create(self, name: str):\n item = self.todo_list.items.create(name=name)\n yield DispatchDOMEvent(\n \"#leaflet-map\",\n \"new-item\",\n {\"id\": item.id, \"name\": item.name, \"geojson\": item.geojson}\n )\n```\n\nThis will trigger that event in the front-end when the request arrives allowing rich JavaScript components to react accordingly without full re-render.\n\n## Template Tags you should know about\n\n- `{% htmx-headers %}`: put it inside your `<header></header>` to load the right scripts and configuration.\n\n```html\n<header>\n {% htmx-headers %}\n</header>\n```\n\n- `{% htmx <ComponentName: str> **kwargs %}`: instantiates and inserts the result of rendering that component with those initialization parameters.\n\n```html\n<div>\n {% htmx 'Button' document=document name='Save Document' is_primary=True %}\n</div>\n```\n\n\n- `{% hx-tag %}`: goes in the root HTML Element of a component template, it sets the component `id` and some other basic configuration details of the component.\n\n```html\n<button {% hx-tag %}>\n ...\n</button>\n```\n\n\n- `{% oob <LocalId: str> %}`: goes in the root HTML Element of an element that will used for partial render (swapped Out Of Band). It sets the id of the element to a concatenation of the current component id and whatever you pass to it, and sets the right [hx-swap-oob](https://htmx.org/attributes/hx-swap-oob/) strategy.\n\n```html\n<div {% oob \"dropdown\" %} class=\"dropdown\">\n ...\n</div>\n```\n\n- `{% on <EventName: str> <EventHandler: str> **kwargs %}` binds the event handler using [hx-trigger](https://htmx.org/attributes/hx-trigger/) to an event handler in the component with certain explicit parameters. Implicit parameters are passed from anything that has a name attribute defined inside the component.\n\n```html\n<button {% on \"click\" \"save\" %}>\n ...\n</button>\n```\n\n- `{% class <ClassName: str>: <BooleanExpr: bool>[, ...] %}` used inside of any html tag to set the class attribute, activating certain classes when corresponding boolean expression is `True`.\n\n\n```html\n<button {% class \"btn\": True, \"btn-primary\": is_primary %}>\n ...\n</button>\n```\n\n## Testing\n\nThis library provides the class `djhtmx.testing.Htmx` which implements a very basic a dumb runtime for testing components. How to use:\n\n\n```python\nfrom django.test import Client, TestCase\nfrom djhtmx.testing import Htmx\n\nfrom .models import Item\n\nclass TestNormalRendering(TestCase):\n def setUp(self):\n Item.objects.create(text=\"First task\")\n Item.objects.create(text=\"Second task\")\n self.htmx = Htmx(Client())\n\n def test_todo_app(self):\n self.htmx.navigate_to(\"/todo\")\n\n [a, b] = self.htmx.select('[hx-name=\"TodoItem\"] label')\n self.assertEqual(a.text_content(), \"First task\")\n self.assertEqual(b.text_content(), \"Second task\")\n\n [count] = self.htmx.select(\".todo-count\")\n self.assertEqual(count.text_content(), \"2 items left\")\n\n # Add new item\n self.htmx.type(\"input.new-todo\", \"3rd task\")\n self.htmx.trigger(\"input.new-todo\")\n\n [count] = self.htmx.select(\".todo-count\")\n self.assertEqual(count.text_content(), \"3 items left\")\n\n [a, b, c] = self.htmx.select('[hx-name=\"TodoItem\"] label')\n self.assertEqual(a.text_content(), \"First task\")\n self.assertEqual(b.text_content(), \"Second task\")\n self.assertEqual(c.text_content(), \"3rd task\")\n```\n\n### API\n\n`Htmx(client: Client)`: pass a Django test client, that can be authenticated if that's required.\n\n`htmx.navigate_to(url, *args, **kwargs)`: This is used to navigate to some url. It is a wrapper of `Client.get` that will retrieve the page and parse the HTML into `htmx.dom: lxml.html.HtmlElement` and create a component repository in `htmx.repo`.\n\n#### Look-ups\n\n`htmx.select(css_selector: str) -> list[lxml.html.HtmlElement]`: Pass some CSS selector here to retrieve nodes from the DOM, so you can modify them or perform assertions over them.\n\n`htmx.find_by_text(text: str) -> lxml.html.HtmlElement`: Returns the first element that contains certain text.\n\n`htmx.get_component_by_type(component_type: type[THtmxComponent]) -> THtmxComponent`: Retrieves the only instance rendered of that component type in the current page. If there is more than one instance this fails.\n\n`htmx.get_components_by_type(component_type: type[THtmxComponent]) -> list[THtmxComponent]`: Retrieves all instances of this component type in the current page.\n\n`htmx.get_component_by_id(component_id: str) -> THtmxComponent`: Retrieves a component by its id from the current page.\n\n#### Interactions\n\n`htmx.type(selector: str | html.HtmlElement, text: str, clear=False)`: This simulates typing in an input or text area. If `clear=True` it clears it replaces the current text in it.\n\n`htmx.trigger(selector: str | html.HtmlElement)`: This triggers whatever event is bound in the selected element and returns after all side effects had been processed.\n\n```python\nself.htmx.type(\"input.new-todo\", \"3rd task\")\nself.htmx.trigger(\"input.new-todo\")\n```\n\n`htmx.send(method: Callable[P, Any], *args: P.args, **kwargs: P.kwargs)`: This sends the runtime to execute that a bound method of a HtmxComponent and returns after all side effects had been processed. Use as in:\n\n```python\ntodo_list = htmx.get_component_by_type(TodoList)\nhtmx.send(todo_list.new_item, text=\"New todo item\")\n```\n\n`htmx.dispatch_event(self, component_id: str, event_handler: str, kwargs: dict[str, Any])`: Similar to `htmx.send`, but you don't need the instance, you just need to know its id.\n\n```python\nhtmx.dispatch_event(\"#todo-list\", \"new_item\", {\"text\": \"New todo item\"})\n```\n",
"bugtrack_url": null,
"license": null,
"summary": "Interactive UI Components for Django using HTMX",
"version": "1.1.1",
"project_urls": {
"Changelog": "https://github.com/edelvalle/djhtmx/blob/master/CHANGELOG.md",
"Documentation": "https://github.com/edelvalle/djhtmx#readme",
"Homepage": "https://github.com/edelvalle/djhtmx",
"Issues": "https://github.com/edelvalle/djhtmx/issues",
"Repository": "https://github.com/edelvalle/djhtmx.git"
},
"split_keywords": [
"django",
" htmx",
" liveview",
" reactive",
" real-time",
" spa",
" websockets"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "b7b764abc6deccbdb6cc391278baa4b8eba2b81c1335da5dea6fa3c06d5e007a",
"md5": "5b17347f883f4f947bf80ac04afb8f75",
"sha256": "c8070b4027f1bb7b0e2e5b4c438304dbb5985994ff48ee4d0a78193e0f52addc"
},
"downloads": -1,
"filename": "djhtmx-1.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "5b17347f883f4f947bf80ac04afb8f75",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.11",
"size": 218144,
"upload_time": "2025-08-23T19:26:52",
"upload_time_iso_8601": "2025-08-23T19:26:52.902513Z",
"url": "https://files.pythonhosted.org/packages/b7/b7/64abc6deccbdb6cc391278baa4b8eba2b81c1335da5dea6fa3c06d5e007a/djhtmx-1.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "1dec97f112be19337586d9c8c777ed72e112c0a0d3e7814a9fcc7ecff59e3910",
"md5": "fc7462e5cf5a429d23c69ba3778a5253",
"sha256": "7e67a0554c4f596f5f0668e278d3fca13a0afde520a76c4b0424c00587b465af"
},
"downloads": -1,
"filename": "djhtmx-1.1.1.tar.gz",
"has_sig": false,
"md5_digest": "fc7462e5cf5a429d23c69ba3778a5253",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.11",
"size": 214259,
"upload_time": "2025-08-23T19:26:55",
"upload_time_iso_8601": "2025-08-23T19:26:55.014036Z",
"url": "https://files.pythonhosted.org/packages/1d/ec/97f112be19337586d9c8c777ed72e112c0a0d3e7814a9fcc7ecff59e3910/djhtmx-1.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-23 19:26:55",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "edelvalle",
"github_project": "djhtmx",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "djhtmx"
}
JSON
