phoenixframework/phoenix_live_view

★ 6,759ElixirAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((Phoenix LiveView))
    How It Works
      Server-rendered HTML
      WebSocket diffs
      No full reloads
    Built-in Features
      Form validation
      File uploads
      Server-side tests
    Integration
      Phoenix default
      Elixir and Erlang VM
      JS hooks for browser
    Scale
      Many concurrent users
      Persistent connections

mindmap root((Phoenix LiveView)) How It Works Server-rendered HTML WebSocket diffs No full reloads Built-in Features Form validation File uploads Server-side tests Integration Phoenix default Elixir and Erlang VM JS hooks for browser Scale Many concurrent users Persistent connections

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a real-time dashboard that updates live without any JavaScript, using server-side Elixir logic.

USE CASE 2

Add instant form validation to a Phoenix web app so users see errors as they type without a page reload.

USE CASE 3

Create a multi-user collaborative feature where all users see updates instantly over persistent WebSocket connections.

USE CASE 4

Build file upload flows with progress bars and image previews without custom JavaScript code.

Tech stack

ElixirErlangPhoenixWebSocket

Getting it running

Difficulty · moderate Time to first run · 1h+

Requires an Elixir and Phoenix development environment, LiveView ships as a default dependency in new Phoenix projects.

In plain English

Phoenix LiveView is a library for building interactive, real-time web applications using Elixir, without writing JavaScript on the client side. When a user interacts with the page, the event travels to the server, which updates the interface and sends back only the parts that changed. This keeps application logic in one place rather than split across server code and client-side JavaScript. The key technical idea is that LiveView renders HTML on the server and tracks which parts of the page need updating. Rather than replacing entire sections of HTML, it calculates and sends minimal diffs over a persistent WebSocket connection. This results in faster page updates and less data sent across the network compared to approaches that replace whole HTML fragments. LiveView comes with built-in support for features that are usually difficult to wire up in traditional web apps. Real-time form validation works out of the box, so the form can respond to user input as they type without a full page reload. File uploads include progress indicators and image previews. You can build reusable UI components, handle navigation between pages without full reloads, and write server-side tests for interactive behavior without needing a browser running alongside the tests. The library ships by default when you create a new Phoenix project. Phoenix itself is built on Elixir, which runs on the Erlang virtual machine. This platform handles large numbers of concurrent connections, so LiveView applications can scale to many simultaneous users without needing to redesign the architecture. If you need to reach down to the browser for something JavaScript-specific, LiveView provides integration hooks and a JavaScript command API for adding animations, transitions, and browser-side effects. A community of component libraries has also built pre-made UI kits on top of LiveView for faster application development.

Copy-paste prompts

Prompt 1

Show me how to build a live search box in Phoenix LiveView that queries the database and updates results as the user types.

Prompt 2

How do I use LiveView's push_event and JavaScript hooks to trigger a CSS animation when a new item appears in a list?

Prompt 3

Write a LiveView component in Elixir that handles file uploads with a progress indicator.

Prompt 4

Help me test a LiveView form with server-side validation using LiveViewTest without needing a running browser.

Prompt 5

How do I handle navigation between pages in Phoenix LiveView without a full browser reload?

Open on GitHub → Explain another repo

← phoenixframework on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.