Live Demos

Examples & Demos

Explore real djust applications. Each demo is fully interactive with complete source code.

100% Server-Side Execution

Every click, input, and interaction you see below runs Python code on the server. No client-side JavaScript logic required. It just feels instant thanks to Rust-powered sub-millisecond VDOM diffing.

Real-Time Counter

Server-Side

Basic reactivity with server-side state management

Each click executes increment() Python method on server

                    views.py
                    
                
from djust import LiveView

class CounterView(LiveView):
    template_name = 'counter.html'

    def mount(self, request):
        """Initialize counter state"""
        self.count = 0

    def increment(self):
        """Increment counter by 1"""
        self.count += 1

    def decrement(self):
        """Decrement counter by 1"""
        self.count -= 1

    def reset(self):
        """Reset counter to 0"""
        self.count = 0

    def get_context_data(self, **kwargs):
        return {'count': self.count}

                    template.html
                    
                
<div class="counter-app">
    <h2>Counter Example</h2>

    <div class="count-display">
        {{ count }}
    </div>

    <div class="button-group">
        <button @click="decrement" class="btn-danger">
            Decrement
        </button>
        <button @click="reset" class="btn-secondary">
            Reset
        </button>
        <button @click="increment" class="btn-success">
            Increment
        </button>
    </div>
</div>

Todo List (CRUD)

Server-Side

Full create, read, update, delete operations

0 completed 0 total

Add, toggle, delete → all Python methods on server

                    views.py
                    
                
from djust import LiveView

class TodoListView(LiveView):
    template_name = 'todo.html'

    def mount(self, request):
        """Initialize todo list"""
        self.todos = []
        self.next_id = 1

    def add_todo(self, text: str = "", **kwargs):
        """Add new todo item"""
        if text.strip():
            self.todos.append({
                'id': self.next_id,
                'text': text,
                'completed': False
            })
            self.next_id += 1

    def toggle_todo(self, id: int = None, **kwargs):
        """Toggle todo completion status"""
        todo = next((t for t in self.todos if t['id'] == id), None)
        if todo:
            todo['completed'] = not todo['completed']

    def delete_todo(self, id: int = None, **kwargs):
        """Delete todo item"""
        self.todos = [t for t in self.todos if t['id'] != id]

    def get_context_data(self, **kwargs):
        completed = sum(1 for t in self.todos if t['completed'])
        return {
            'todos': self.todos,
            'completed_count': completed,
            'total_count': len(self.todos)
        }

                    template.html
                    
                
<div class="todo-app">
    <h2>Todo List</h2>

    <form @submit="add_todo" class="add-form">
        <input type="text"
               name="text"
               placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>

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

    <div class="stats">
        <span>{{ completed_count }} completed</span>
        <span>{{ total_count }} total</span>
    </div>
</div>

Real-Time Form Validation

Server-Side

Instant feedback with Django Forms integration

Email Address

Password

Real-time validation with instant feedback

Validation runs validate_field() on every keystroke

                    views.py
                    
                
from djust import LiveView
from djust.forms import FormMixin
from .forms import SignupForm

class SignupView(FormMixin, LiveView):
    form_class = SignupForm
    template_name = 'signup.html'

    def mount(self, request):
        """Initialize form view"""
        self.success_message = None

    def validate_field(self, field: str = None, value: str = "", **kwargs):
        """Real-time field validation"""
        # Validation happens automatically via FormMixin
        # Errors are displayed in real-time
        pass

    def form_valid(self, form):
        """Handle valid form submission"""
        # Save the user
        user = form.save()
        self.success_message = "Account created successfully!"
        # Reset form
        self.form = self.form_class()

    def form_invalid(self, form):
        """Handle invalid form submission"""
        # Errors displayed automatically
        pass

                    forms.py
                    
                
from django import forms
from django.contrib.auth.models import User

class SignupForm(forms.ModelForm):
    """User signup form with validation"""

    password = forms.CharField(
        widget=forms.PasswordInput,
        min_length=8,
        help_text="At least 8 characters"
    )

    class Meta:
        model = User
        fields = ['email', 'password']

    def clean_email(self):
        """Validate email is unique"""
        email = self.cleaned_data.get('email')
        if User.objects.filter(email=email).exists():
            raise forms.ValidationError(
                "Email already registered"
            )
        return email

    def clean_password(self):
        """Validate password strength"""
        password = self.cleaned_data.get('password')
        if len(password) < 8:
            raise forms.ValidationError(
                "Password must be at least 8 characters"
            )
        return password

                    template.html
                    
                
<div class="signup-form">
    <h2>Sign Up</h2>

    <form @submit="submit_form">
        <div class="form-field">
            <label for="email">Email</label>
            <input type="email"
                   name="email"
                   @change="validate_field"
                   value="{{ form.email.value|default:'' }}" />
            {% if form.email.errors %}
            <p class="error">{{ form.email.errors.0 }}</p>
            {% endif %}
        </div>

        <div class="form-field">
            <label for="password">Password</label>
            <input type="password"
                   name="password"
                   @change="validate_field" />
            {% if form.password.errors %}
            <p class="error">{{ form.password.errors.0 }}</p>
            {% endif %}
            <p class="help">At least 8 characters</p>
        </div>

        <button type="submit">Sign Up</button>

        {% if success_message %}
        <p class="success">✓ {{ success_message }}</p>
        {% endif %}
    </form>
</div>

Sortable Data Table

Server-Side

Interactive table with search and sorting

Name ↑	Price ↕	Stock ↕
27" Monitor	$399	12
Laptop Pro	$1299	42
Mechanical Keyboard	$89	23
USB-C Hub	$45	78
Wireless Mouse	$29	156

Search & sort execute search() and sort() on server

                    views.py
                    
                
from djust import LiveView
from .models import Product

class ProductTableView(LiveView):
    template_name = 'product_table.html'

    def mount(self, request):
        """Initialize table view"""
        self._products = Product.objects.all()
        self.search_query = ""
        self.sort_by = "name"
        self.sort_order = "asc"

    def search(self, value: str = "", **kwargs):
        """Search products by name"""
        self.search_query = value
        self._refresh_products()

    def sort(self, field: str = None, **kwargs):
        """Sort products by field"""
        if field == self.sort_by:
            # Toggle order
            self.sort_order = "desc" if self.sort_order == "asc" else "asc"
        else:
            self.sort_by = field
            self.sort_order = "asc"
        self._refresh_products()

    def _refresh_products(self):
        """Refresh product list with filters"""
        queryset = Product.objects.all()

        # Apply search filter
        if self.search_query:
            queryset = queryset.filter(
                name__icontains=self.search_query
            )

        # Apply sorting
        order_prefix = "-" if self.sort_order == "desc" else ""
        queryset = queryset.order_by(f"{order_prefix}{self.sort_by}")

        self._products = queryset

    def get_context_data(self, **kwargs):
        self.products = self._products  # JIT serialization
        context = super().get_context_data(**kwargs)
        context.update({
            'search_query': self.search_query,
            'sort_by': self.sort_by,
            'sort_order': self.sort_order
        })
        return context

                    template.html
                    
                
<div class="product-table">
    <h2>Products</h2>

    <input type="text"
           @input="search"
           value="{{ search_query }}"
           placeholder="Search products..." />

    <table>
        <thead>
            <tr>
                <th @click="sort" data-field="name">
                    Name
                    {% if sort_by == 'name' %}
                        {% if sort_order == 'asc' %}↑{% else %}↓{% endif %}
                    {% endif %}
                </th>
                <th @click="sort" data-field="price">
                    Price
                    {% if sort_by == 'price' %}
                        {% if sort_order == 'asc' %}↑{% else %}↓{% endif %}
                    {% endif %}
                </th>
                <th @click="sort" data-field="stock">
                    Stock
                    {% if sort_by == 'stock' %}
                        {% if sort_order == 'asc' %}↑{% else %}↓{% endif %}
                    {% endif %}
                </th>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
            <tr>
                <td>{{ product.name }}</td>
                <td>${{ product.price }}</td>
                <td>{{ product.stock }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Ready to Build Your Own?

Try these examples in the interactive playground or install djust locally to start building real-time applications.

Try Playground Read Documentation