phoenixframework/phoenix_live_view
Phoenix Live View
Phoenix LiveView is an Elixir-based framework that renders HTML on the server and sends only the changed parts to the client over a persistent WebSocket connection. It operates on a process-per-connection model, where each user session runs in its own isolated Elixir process for fault tolerance and independent state management, and includes a LongPolling fallback transport for environments where WebSocket connections are unavailable.
The framework provides server-side rendered diffs and WebSocket-based state synchronization to maintain a continuous bidirectional channel between server and client without full page reloads. It includes a client-side hook system that allows custom JavaScript to intercept and extend LiveView lifecycle events and DOM interactions, compile-time template optimization to minimize runtime overhead, and a form state recovery protocol that automatically restores input values when a LiveView reconnects after a network interruption or server crash.
The framework supports real-time form validation on the server as the user types, file uploads over WebSocket with progress tracking and chunked processing, and navigation without full page loads. It also provides a testing framework that simulates user interactions on the server side to verify LiveView behavior without needing a full browser, and a server-side component inspector for troubleshooting interactive applications.
Features
- WebSocket Diff Renderers - Renders HTML on the server and sends minimal diffs to the client over a WebSocket connection, with an optional LongPolling fallback.
- Server-Side Rendering Frameworks - A framework that synchronizes UI state with the server over WebSockets, updating only changed HTML without full page reloads.
- Elixir Frameworks - An Elixir-based framework that renders HTML on the server and sends minimal diffs to the client over persistent WebSocket connections.
- Process-Per-Connection Architectures - Each user session runs in its own isolated Elixir process for fault tolerance and independent state management.
- HTML Diff Transmitters - Renders HTML on the server and sends minimal diffs to the client over a WebSocket connection for reactive interfaces.
- Lifecycle Hooks - Provides a client-side hook system for intercepting LiveView lifecycle events and DOM interactions.
- Form Data Submission - Sends form data to the server on submission and updates the page accordingly.
- Real-time Validation - Validates form fields on the server as the user types, updating errors without a full page reload.
- Differential Updates - Renders HTML on the server and sends only changed parts to the client over WebSocket.
- WebSocket State Synchronization - Maintains a continuous bidirectional WebSocket channel to synchronize server state with the client.
- Progress-Tracked Uploads - Uploads files with progress indicators and image previews, processing them on the server or forwarding to a cloud service.
- Nested Form Validation - Renders and manages form fields for associated data models such as embedded schemas or child records.
- Server-Side - A tool that inspects the component tree, assigns, and lifecycle callbacks of running processes in real time to troubleshoot interactive applications.
- Progress Tracking - Uploads files with progress indicators and image previews, processing them inline or forwarding to cloud services.
- Progress-Tracked Uploads - Uploads files from the client to the server with progress indicators and image previews, processing them inline or forwarding to a cloud service.
- Live Navigation Handlers - Updates page content on link clicks by loading only the minimum required data, keeping the app responsive.
- Compile-Time Template Optimizations - Transforms LiveView templates into efficient server-side rendering code during compilation.
- Server-Side Interaction Simulators - Simulates user interactions on the server side to verify LiveView behavior without needing a full browser.
- Server-Side Interaction Simulators - Simulates user interactions on the server side to verify LiveView behavior without needing a full browser.
- Nested Input Renderers - Renders and manages form fields for associated data models, such as embedded schemas or child records, with automatic identifier handling.
- Input and Form State Restoration - Automatically restores input values and form state when a LiveView reconnects after network interruption.
- Reconnection State Restorers - Restores input values automatically when a LiveView reconnects or remounts after a crash or disconnect.
- Reactive File Inputs - Provides reactive file inputs with drag-and-drop support for uploading files within LiveView forms.
- Non-Reloading History Updates - Updates only the content that changes when a user clicks a link, keeping the page lightweight and fast.
- Recursive Form Nesting - Renders form fields for associated data models, automatically managing hidden identifiers for nested records.
- File Uploads - Streams file data over WebSocket connections with progress tracking and chunked processing.
