Building Your First Reactive Component with djust

What We'll Build

In this tutorial, we'll build a real-time counter component that updates without page refreshes. Simple, but it demonstrates the core concepts of djust.

Step 1: Create the View

First, create a new LiveView:

# views.py
from djust import LiveView

class CounterView(LiveView):
    template_name = "counter.html"
    
    def mount(self, request):
        """Initialize component state."""
        self.count = 0
    
    def increment(self):
        """Handle increment button click."""
        self.count += 1
    
    def decrement(self):
        """Handle decrement button click."""
        self.count -= 1

Step 2: Create the Template

Create the template with event bindings:

<!-- counter.html -->
<div class="counter">
    <h1>Count: {{ count }}</h1>
    <button dj-click="decrement">-</button>
    <button dj-click="increment">+</button>
</div>

Step 3: Add the URL

# urls.py
from django.urls import path
from .views import CounterView

urlpatterns = [
    path("counter/", CounterView.as_view(), name="counter"),
]

That's It!

No JavaScript. No API endpoints. No state management libraries. Just Python and HTML.

When you click the buttons, djust:

1. Sends the event to the server
2. Runs your Python handler
3. Computes the DOM diff
4. Updates only the changed elements

Next Steps

Try adding more features: form inputs, keyboard shortcuts, or connect it to a database. Check out our documentation for more examples.