Django + Datastar Examples

Live Demo: https://django-datastar-examples.onrender.com/

A comprehensive collection of examples demonstrating how to build hypermedia-driven web applications using Datastar with Django.

Table of Contents

• What is Datastar?
• Why Datastar?
• Examples
• Quick Start
• Project Structure
• Models
• Resources
• License

What is Datastar?

Datastar is a hypermedia framework that combines the best of HTMX (server-side rendering) and Alpine.js (client-side reactivity). It enables you to build modern, reactive web applications using a hypermedia approach where the server sends HTML fragments that Datastar merges into the DOM.

Key features:

• Server-Sent Events (SSE) for real-time updates
• Signals for client-side state management
• Fragment merging using idiomorph

Why Datastar?

Datastar offers a compelling alternative to traditional SPA frameworks:

• No JavaScript Required - Build reactive UIs with pure HTML attributes
• Progressive Enhancement - Works without JavaScript, enhanced with it
• Small Bundle Size - ~15KB vs hundreds of KB for React/Vue/Angular
• Django-Native - Use Server-Sent Events (SSE) for real-time updates
• Simple Mental Model - Server sends HTML or signals, browser merges it - no virtual DOM

# A Datastar view in Django - that's all it takes
from datastar_py.django import datastar_response, read_signals, ServerSentGenerator as SSE

@datastar_response
def search_view(request):
   signals = read_signals(request)
    query = signals.get('query')
    contacts = Contact.objects.filter(name__icontains=query)

    html = render_to_string('fragments/contact_list.html', {'contacts': contacts})
    yield SSE.patch_elements(html, selector='#results')

Examples

This project includes 13 practical examples, each demonstrating a common Datastar pattern:

#	Example	Description
1	Active Search	Real-time search with debounced queries
2	Click to Load	Load more content on button click
3	Edit Row	Inline row editing with instant updates
4	File Upload	Progress tracking for file uploads via SSE
5	Infinite Scroll	Auto-load content as user scrolls
6	Lazy Tabs	Tab content loaded on first activation
7	Merge Tags	Fragment merging with ID matching
8	Modal	Dynamic modal dialogs
9	Notifications	Real-time toast notifications
10	Sortable	Drag-and-drop reordering
11	TodoMVC	Full CRUD Todo application
12	Validation	Form validation with error feedback
13	System Messages	User feedback messages (success, error, info)

Home Page

Light Mode	Dark Mode

Screenshots

Example	Light Mode	Dark Mode
Active Search
Click to Load
Edit Row
File Upload
Lazy Tabs
Sortable
Notifications

Quick Start

1. Clone the repository

2. Create and activate virtual environment

   uv venv
   uv sync

3. Copy environment variables

   cp .env_sample .env

4. Run migrations

   uv run python manage.py migrate

5. Seed sample data (optional)

   uv run python manage.py seed_data

6. Start the development server

   uv run python manage.py runserver

7. Visit http://127.0.0.1:8000/

Project Structure

django-datastar-examples/
├── config/                  # Django settings and configuration
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── examples/                # Main application with examples
│   ├── models.py            # Demo models (Contact, Todo, etc.)
│   ├── views.py             # View handlers
│   ├── urls.py              # URL routing
│   └── templates/examples/  # Example templates
├── templates/               # Base templates
├── docs/                   # Documentation
│   └── datastar-guide/     # Datastar integration guide
├── pyproject.toml           # Project dependencies
└── manage.py                # Django management script

Models

The project includes four models for demonstrations:

• Contact - For search and CRUD examples
• Todo - For TodoMVC example
• Notification - For notifications example
• Item - For sortable example

Resources

• Datastar Documentation
• Datastar Python SDK

License

MIT