Phoenix LiveView — Rich Real-Time UIs Without JavaScript

Introduction

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. By maintaining a persistent WebSocket connection between browser and server, LiveView can push DOM updates in milliseconds without writing custom JavaScript. State lives on the server in an Elixir process, giving you the full power of the BEAM VM for concurrency, fault tolerance, and distributed computing.

What Phoenix LiveView Does

• Renders initial HTML on the server and establishes a WebSocket connection
• Pushes minimal DOM diffs to the browser when server state changes
• Handles user events (clicks, form inputs, key presses) via the WebSocket
• Supports file uploads, client hooks, and JS interop for complex interactions
• Provides real-time form validation and live navigation without page reloads

Architecture Overview

Each LiveView is a GenServer process on the BEAM VM. On first request, the server renders full HTML and sends it to the browser. Once connected via WebSocket, user events flow to the process, which updates its assigns (state), re-renders the template, and diffs the new HTML against the previous render. Only changed DOM nodes are sent as a compact binary patch, which the client-side JavaScript library applies to the page.

Self-Hosting & Configuration

• LiveView is included in new Phoenix projects by default (Phoenix 1.6+)
• Configure the WebSocket endpoint in endpoint.ex with transport options
• Set connect_info for session data, CSRF tokens, and user identification
• Tune process limits and WebSocket timeouts in config/runtime.exs
• Deploy on any server with Elixir installed, or use Docker with the official Elixir image

Key Features

• Server-rendered real-time UI with no custom JavaScript required
• Automatic DOM diffing sends only changed bytes over WebSocket
• Built-in support for file uploads with progress tracking
• LiveComponents for reusable stateful UI elements
• Streams API for efficient rendering of large collections without full re-renders

Comparison with Similar Tools

• Hotwire (Turbo + Stimulus) — Hotwire augments server-rendered HTML with JS sprinkles; LiveView provides full bidirectional real-time state management
• HTMX — HTMX adds AJAX/WebSocket via HTML attributes; LiveView manages a persistent stateful server process per connection
• Laravel Livewire — Livewire brings similar server-driven UI to PHP/Laravel; LiveView leverages Elixir's concurrency for handling millions of connections
• React/Next.js — React requires a full client-side JS runtime; LiveView ships no application JavaScript
• Blazor Server — Blazor Server uses a similar WebSocket model in .NET; LiveView benefits from BEAM's lightweight process model

FAQ

Q: How many concurrent connections can LiveView handle? A: Each LiveView is a lightweight BEAM process. A single server can handle hundreds of thousands of concurrent WebSocket connections depending on hardware and state complexity.

Q: Do I need to write any JavaScript? A: For most use cases, no. LiveView handles interactions server-side. For browser-specific APIs (clipboard, geolocation, animations), you can use JS hooks.

Q: What happens when the WebSocket disconnects? A: LiveView automatically reconnects and re-renders the current state. The client shows a connection indicator and queues events during brief disconnections.

Q: Can I use LiveView for mobile apps? A: LiveView Native extends the model to iOS and Android, rendering native UI components driven by server-side Elixir processes.

Sources

• https://github.com/phoenixframework/phoenix_live_view
• https://hexdocs.pm/phoenix_live_view