Interactive Live Demos

Explore real-time, reactive examples showcasing Django Rust Live's capabilities. All demos feature instant updates without page reloads.

Demo Counter

Simple counter demonstrating real-time state management and event handling. Click buttons to increment, decrement, or reset the value.

✓ Real-time updates
✓ Event handling (@click)
✓ State synchronization
✓ No page reloads

Try Demo

Demo Todo List

Full-featured todo list with add, complete, and delete functionality. Shows complex state management and list rendering.

✓ Add/remove items
✓ Mark complete
✓ Filter by status
✓ Persistent state

Try Demo

Demo Live Chat

Real-time chat interface with message history and user presence. Demonstrates WebSocket communication patterns.

✓ Instant messaging
✓ Message history
✓ Typing indicators
✓ Auto-scroll

Try Demo

Demo React-like UI

Demonstrates React-style component patterns and reactive rendering with Django Rust Live's VDOM engine.

✓ Component composition
✓ VDOM diffing
✓ Efficient updates
✓ Nested components

Try Demo

Demo Data Table

Interactive data table with sorting, filtering, and pagination. Perfect for displaying large datasets efficiently.

✓ Sort columns
✓ Search/filter
✓ Pagination
✓ Row selection

Try Demo

Demo Performance Test

Stress test the VDOM rendering engine with rapid updates. See how Django Rust Live handles high-frequency changes.

✓ Rapid updates
✓ Performance metrics
✓ Benchmark tools
✓ Optimized diffing

Try Demo

Key Features

Real-time Updates: Changes sync instantly via WebSocket
Event Handling: Simple @click, @change, @submit directives
VDOM Rendering: Efficient DOM updates like React
State Management: Python-based state on the server
No JavaScript: Write Python, get reactive UI

How It Works

1. Define View: Create LiveView class with state
2. Add Template: Use @ directives for events
3. Handle Events: Write Python methods
4. Auto Updates: VDOM patches DOM automatically
5. Zero Config: Works out of the box

Quick Start

Creating a LiveView

from django_rust_live import LiveView

class CounterView(LiveView):
    count = 0

    def increment(self, **kwargs):
        self.count += 1

    def decrement(self, **kwargs):
        self.count -= 1

Template with Event Handlers

<div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
</div>