✅

Todo List Demo

Dynamic task management with real-time updates and state synchronization

Live Demo

Add, toggle, and delete tasks in real-time

📝

No tasks yet. Add one above!

0
Active
0
Completed

Implementation

Full source code for this demo

views.py Python 
from djust import LiveView

class TodoView(LiveView):
    """
    Todo list demo - showcases list
    manipulation and state management
    """
    template_name = "demos/todo.html"

    def mount(self, request, **kwargs):
        self.todos = []
        self.next_id = 1

    def add_todo(self, text=""):
        if text.strip():
            self.todos.append({
                'id': self.next_id,
                'text': text,
                'done': False,
            })
            self.next_id += 1

    def toggle_todo(self, id=None, **kwargs):
        item_id = id or kwargs.get('todo_id')
        if item_id:
            for todo in self.todos:
                if todo['id'] == int(item_id):
                    todo['done'] = not todo['done']
                    break

    def delete_todo(self, id=None, **kwargs):
        item_id = id or kwargs.get('todo_id')
        if item_id:
            self.todos = [t for t in self.todos
                         if t['id'] != int(item_id)]

    @property
    def active_count(self):
        return sum(1 for t in self.todos
                  if not t['done'])

    @property
    def done_count(self):
        return sum(1 for t in self.todos
                  if t['done'])
todo.html HTML 
<!-- Add Todo Form -->
<form @submit="add_todo">
  <input type="text" name="text"
         placeholder="What needs to be done?" />
  <button type="submit">Add</button>
</form>

<!-- Todo List -->
{% for todo in todos %}
  <div class="todo-item">
    <input type="checkbox"
           {% if todo.done %}checked{% endif %}
           @change="toggle_todo"
           data-id="{{ todo.id }}" />
    <span>{{ todo.text }}</span>
    <button @click="delete_todo"
            data-id="{{ todo.id }}">
      Delete
    </button>
  </div>
{% endfor %}

<!-- Stats -->
<div>
  {{ active_count }} active
  {{ done_count }} completed
</div>

How It Works

📋

List Management

Server maintains todo list state with add/toggle/delete operations

🎯

Event Parameters

data-id attributes pass item IDs to event handlers

🔢

Computed Properties

@property decorators calculate active/done counts automatically

Back to Demos