⚡

Counter Demo

Real-time reactive counter demonstrating instant state updates via WebSocket

Live Demo

Click buttons to see instant updates without page reload

Count
0

Implementation

Full source code for this demo

views.py Python 
from djust import LiveView

class CounterView(LiveView):
    """
    Simple counter demo - showcases
    reactive state updates
    """
    template_name = "demos/counter.html"

    def mount(self, request, **kwargs):
        self.count = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

    def reset(self):
        self.count = 0
counter.html HTML 
<div>
  <h2>Count: {{ count }}</h2>

  <button @click="increment">
    Increment
  </button>

  <button @click="decrement">
    Decrement
  </button>

  <button @click="reset">
    Reset
  </button>
</div>

How It Works

🔌

WebSocket Connection

Persistent connection keeps client and server in sync

⚡

Event Handling

@click directive sends events to Python methods

🔄

VDOM Updates

Minimal DOM patches update only what changed

Back to Demos