Django LiveView

Django LiveView is a Django starter template that implements the HTML over WebSockets pattern, enabling real-time single-page applications without a JSON API or JavaScript-rendered frontend. It takes Django views and templates as input and produces instant, socket-delivered HTML updates in the browser, running on Django Channels and Stimulus. The template includes a full cat-management demo app covering CRUD, login, real-time broadcasts, and SSR pages for SEO, plus a live demo at django-liveview-demo.andros.dev.

What is Django LiveView?

Django LiveView is a Django starter template that builds real-time single-page applications by keeping all rendering and business logic in Python and using WebSockets to deliver HTML fragments to the browser. It was created by Andros Fenollosa and is provided as a runnable reference implementation with a live demo. Instead of building an API and a JavaScript frontend, the template opens a WebSocket channel via Django Channels; JavaScript only captures events and sends action names, while Django renders HTML snippets and sends them back to be inserted into the page.

Key Features

• No API layer — Build SPAs without creating REST or GraphQL endpoints; Django renders HTML and sends it over the WebSocket.
• Django template rendering — Use Django's template system, ORM, forms, admin, and plugins as-is; logic stays in Python.
• Asynchronous realtime events — Components communicate through WebSocket actions; any component can produce and consume events, enabling decoupled, asynchronous communication.
• Server-Side Rendering (SSR) — The same templates are rendered via classic Django views (views.py) for SEO, sitemaps, and direct URL access.
• Dockerized setup — Run the whole stack with docker compose and Make (make run.fake, make run.server) using PostgreSQL.
• Demo app with many patterns — Includes real-time navigation, URL updates, flash notifications, broadcast to all clients, multilanguage, contact form validation, file upload, login, private page, API-driven comments, and RSS/sitemap/robots.txt/humans.txt/security.txt.
• CSRF protection over WebSockets — Security is built into the realtime channel.
• Stimulus controllers — A thin JavaScript layer (Stimulus) captures DOM events and sends action strings; there is no business logic in the frontend.

Who is it for?

• Python and Django developers who want the interactivity of a single-page app while writing all UI logic in Python with Django templates.
• Backend engineers who want to avoid maintaining a separate JavaScript single-page application and API layer.
• Teams exploring the "HTML over the Wire" architecture who are looking for a runnable Django implementation to study or extend.

What can you do with Django LiveView?

• Create real-time pages — Navigation works without reloads, the browser URL updates dynamically, and content is swapped instantly via WebSocket-rendered HTML (shown in the cats list and single-cat pages).
• Broadcast to all users — Send real-time notifications to every connected client; the demo's "feline notifications" feature illustrates this.
• Handle forms and validation — The contact form demo shows server-side validation with HTML rendered in real time and returned to the user.
• Add private areas and authentication — A login page, a private profile page, and session-based access control are included.
• Serve SEO-friendly output — Because SSR views exist, every dynamic page can be indexed, and the template outputs RSS, sitemap, robots.txt, humans.txt, and security.txt.

How does Django LiveView work?

The architecture routes actions through Stimulus controllers, a WebSocket client, and Django Channels consumers. When a user clicks, Stimulus sends an action string such as "about_us->update_random_number_html" over a WebSocket. The consumer in consumers.py looks up the matching function in the actions directory, which calls render_to_string() on a template and sends the resulting HTML plus a target selector via send_html(). The frontend inserts the HTML into that selector, and for page-level changes the URL is updated as well. To add a new page, you define a route, a Django view, an action file providing get_context() and send_page(), a template, and a Stimulus controller registered in main.js.

Pros and cons

• Pro: Single language — All rendering and logic live in Python; JavaScript is limited to sending action strings.
• Pro: Familiar tools — Reuses Django's ORM, forms, admin, and template language.
• Pro: SEO-friendly — SSR views mean pages work without WebSockets for crawlers.
• Con: Still maturing — The package is not yet published to PyPI (roadmap item), so you run the template from the repository with Docker.
• Con: Setup quirk — The documentation notes that on first run you may need to restart Docker because PostgreSQL creation can race with Django's initial connection.

FAQ

Is Django LiveView free to use?

The repository is a public GitHub project with a live demo; it is provided as a starter template. The author sells a book, "Building SPAs with Django and HTML Over the Wire", which walks through the underlying concepts, but the template itself is open.

Does Django LiveView require a separate JavaScript framework?

No. It uses Stimulus only as a thin event-handling layer to capture clicks and send action names over WebSockets. All business logic and HTML rendering happen in Django/Python. Substantial JavaScript development is unnecessary.

What tools do I need to run Django LiveView?

Docker and Make are required. The setup instructs you to copy envExample to .env, run docker compose up, then make run.fake to load fake data. The app runs at http://feline-web.localhost/ with Django admin at /admin/ (admin/admin for the demo).

Can I use Django LiveView for production?

The roadmap lists publishing a package and a website as incomplete, so it is best treated as a reference implementation or starting point rather than a maintained product. For production, you would need to handle deployment, scaling WebSockets, and packaging yourself.