# phoenixframework/phoenix_live_view **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/phoenixframework-phoenix-live-view).** 6,722 stars · 1,032 forks · Elixir · mit ## Links - GitHub: https://github.com/phoenixframework/phoenix_live_view - Homepage: https://hex.pm/packages/phoenix_live_view - awesome-repositories: https://awesome-repositories.com/repository/phoenixframework-phoenix-live-view.md ## Description 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. ## Tags ### User Interface & Experience - [WebSocket Diff Renderers](https://awesome-repositories.com/f/user-interface-experience/state-to-html-rendering/websocket-diff-renderers.md) — Renders HTML on the server and sends minimal diffs to the client over a WebSocket connection, with an optional LongPolling fallback. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md)) - [Nested Input Renderers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/nested-input-renderers.md) — 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](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/input-and-form-state-restoration.md) — Automatically restores input values and form state when a LiveView reconnects after network interruption. - [Reconnection State Restorers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/input-and-form-state-restoration/reconnection-state-restorers.md) — Restores input values automatically when a LiveView reconnects or remounts after a crash or disconnect. ### Web Development - [Server-Side Rendering Frameworks](https://awesome-repositories.com/f/web-development/server-side-rendering-frameworks.md) — A framework that synchronizes UI state with the server over WebSockets, updating only changed HTML without full page reloads. - [Elixir Frameworks](https://awesome-repositories.com/f/web-development/web-frameworks/elixir-frameworks.md) — An Elixir-based framework that renders HTML on the server and sends minimal diffs to the client over persistent WebSocket connections. - [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/dom-interaction-hooks/lifecycle-hooks.md) — Provides a client-side hook system for intercepting LiveView lifecycle events and DOM interactions. - [Form Data Submission](https://awesome-repositories.com/f/web-development/form-data-support/form-data-submission.md) — Sends form data to the server on submission and updates the page accordingly. ([source](https://phoenix-live-view.hexdocs.pm/form-bindings.html)) - [Real-time Validation](https://awesome-repositories.com/f/web-development/form-validation/real-time-validation.md) — Validates form fields on the server as the user types, updating errors without a full page reload. ([source](https://phoenix-live-view.hexdocs.pm/form-bindings.html)) - [Differential Updates](https://awesome-repositories.com/f/web-development/server-side-rendering/differential-updates.md) — Renders HTML on the server and sends only changed parts to the client over WebSocket. - [WebSocket State Synchronization](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/websocket-state-synchronization.md) — Maintains a continuous bidirectional WebSocket channel to synchronize server state with the client. - [Reactive File Inputs](https://awesome-repositories.com/f/web-development/file-uploads/reactive-file-inputs.md) — Provides reactive file inputs with drag-and-drop support for uploading files within LiveView forms. ([source](https://phoenix-live-view.hexdocs.pm/form-bindings.html)) - [Non-Reloading History Updates](https://awesome-repositories.com/f/web-development/navigation-history-providers/non-reloading-history-updates.md) — Updates only the content that changes when a user clicks a link, keeping the page lightweight and fast. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md)) - [Recursive Form Nesting](https://awesome-repositories.com/f/web-development/nested-component-integrations/recursive-form-nesting.md) — Renders form fields for associated data models, automatically managing hidden identifiers for nested records. ([source](https://phoenix-live-view.hexdocs.pm/form-bindings.html)) - [File Uploads](https://awesome-repositories.com/f/web-development/websockets/file-uploads.md) — Streams file data over WebSocket connections with progress tracking and chunked processing. ### Data & Databases - [Process-Per-Connection Architectures](https://awesome-repositories.com/f/data-databases/process-per-connection-architectures.md) — Each user session runs in its own isolated Elixir process for fault tolerance and independent state management. ### Networking & Communication - [HTML Diff Transmitters](https://awesome-repositories.com/f/networking-communication/websocket-servers/html-diff-transmitters.md) — Renders HTML on the server and sends minimal diffs to the client over a WebSocket connection for reactive interfaces. - [Progress-Tracked Uploads](https://awesome-repositories.com/f/networking-communication/upload-progress-tracking/progress-tracked-uploads.md) — Uploads files from the client to the server with progress indicators and image previews, processing them inline or forwarding to a cloud service. ### Part of an Awesome List - [Progress-Tracked Uploads](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/progress-tracked-uploads.md) — Uploads files with progress indicators and image previews, processing them on the server or forwarding to a cloud service. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md)) - [Nested Form Validation](https://awesome-repositories.com/f/awesome-lists/devtools/forms-and-validation/nested-form-validation.md) — Renders and manages form fields for associated data models such as embedded schemas or child records. ([source](https://phoenix-live-view.hexdocs.pm/form-bindings.html)) ### Development Tools & Productivity - [Server-Side](https://awesome-repositories.com/f/development-tools-productivity/component-inspectors/server-side.md) — A tool that inspects the component tree, assigns, and lifecycle callbacks of running processes in real time to troubleshoot interactive applications. ### DevOps & Infrastructure - [Progress Tracking](https://awesome-repositories.com/f/devops-infrastructure/file-uploaders/progress-tracking.md) — Uploads files with progress indicators and image previews, processing them inline or forwarding to cloud services. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md)) ### Software Engineering & Architecture - [Live Navigation Handlers](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/live-navigation-handlers.md) — Updates page content on link clicks by loading only the minimum required data, keeping the app responsive. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md)) - [Compile-Time Template Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/abstraction-domain-modeling/compile-time-architectural-patterns/compile-time-template-optimizations.md) — Transforms LiveView templates into efficient server-side rendering code during compilation. ### Testing & Quality Assurance - [Server-Side Interaction Simulators](https://awesome-repositories.com/f/testing-quality-assurance/automation-interaction-tools/user-interaction-simulation/server-side-interaction-simulators.md) — Simulates user interactions on the server side to verify LiveView behavior without needing a full browser. - [Server-Side Interaction Simulators](https://awesome-repositories.com/f/testing-quality-assurance/built-in-testing-frameworks/interactive-logic-testing/server-side-interaction-simulators.md) — Simulates user interactions on the server side to verify LiveView behavior without needing a full browser. ([source](https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/README.md))