In this post, I’m going to explore using Django, HTMX, django-components and a slick project layout to build the best todo app you’ve ever seen that doesn’t require React.
HTMX seems to be having a moment and not just because the X account is a top-tier meme factory. It seems to fill a nice somewhere between full luddite server side rendering and the insanity of whatever is currently going on in the frontend land (it’s Next.js right? Or are we already on to the next… js? 😮💨)
Django seems like a perfectly fine framework to use with HTMX and there are plenty of tutorials out there already on this subject. Enter django-components, a neat little library I was recently turned on to that promises to deliver some of the nice parts of modern web dev: isolated, re-usable UI components, but for Django.
The source code for this demo is located in the Github repo.
One last thing to note: I’m using a simplified django project layout which is ideal for little demo purposes like this. No need to create an app when you know there will only be one. The project layout looks like this:
../dj_super_todo/
├── asgi.py
├── db.sqlite3
├── dj_super_todo
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
├── settings.py
├── urls.py
└── wsgi.py
First create the simplest TODO model possible:
# models.py
from django.db import models
class Todo(models.Model):
done = models.BooleanField(blank=True, default=False)
content = models.CharField(max_length=500)
Create the migrations and seed the database with a few TODOs using the normal Django methods.
./manage.py makemigrations
./manage.py migrate
./manage.py shell
>>> Todo.objects.create(content="Get better at speaking to my dog.")
<Todo: Todo object (1)>
>>> Todo.objects.create(content="Get up, get up, and get down.")
<Todo: Todo object (2)>
Next install django-components and follow the installation instructions.
Now create the simplest todo component possible:
The template: components/todo/todo.html
<div class="todo" id="todo-{{ todo.id }}">
{{ todo.content }}
<button>Done</button>
</div>
The CSS: components/todo/todo.css
.todo {
width: 300px;
background: skyblue;
border: 1px solid;
margin: 2px 0px;
padding: 2px;
}
And register the component in components/todo/todo.py
from django_components import component
@component.register("todo")
class Todo(component.Component):
template_name = "todo/todo.html"