phoenix_live_view

Rich, real-time user experiences with server-rendered HTML

6,163

926

6,163

View on GitHub

Top Related Projects

livewire

22,320

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

turbo

6,701

The speed of a single-page web application without having to write any JavaScript

alpine

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

stimulus-use

1,474

A collection of composable behaviors for your Stimulus Controllers

inertia

6,371

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

Quick Overview

Phoenix LiveView is a powerful library for building real-time, interactive web applications in Elixir without writing JavaScript. It allows developers to create dynamic user interfaces with server-rendered HTML, providing a seamless experience for users while simplifying the development process.

Pros

Reduces the need for complex JavaScript frameworks
Leverages Elixir's concurrency model for high performance
Simplifies real-time updates and state management
Provides a smooth developer experience with hot code reloading

Cons

Learning curve for developers new to Elixir or functional programming
Limited ecosystem compared to popular JavaScript frameworks
May not be suitable for highly complex client-side interactions
Potential for higher server load compared to static sites

Code Examples

Basic LiveView component:

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def handle_event("increment", _, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end

  def render(assigns) do
    ~H"""
    <div>
      <h1>Count: <%= @count %></h1>
      <button phx-click="increment">Increment</button>
    </div>
    """
  end
end

This example creates a simple counter component with a button to increment the count.

Real-time form validation:

def handle_event("validate", %{"user" => user_params}, socket) do
  changeset =
    %User{}
    |> User.changeset(user_params)
    |> Map.put(:action, :validate)

  {:noreply, assign(socket, changeset: changeset)}
end

This code snippet demonstrates how to handle real-time form validation in LiveView.

Live component with dynamic updates:

defmodule MyAppWeb.UserListLive do
  use MyAppWeb, :live_component

  def update(assigns, socket) do
    {:ok, assign(socket, users: Accounts.list_users())}
  end

  def render(assigns) do
    ~H"""
    <ul>
      <%= for user <- @users do %>
        <li><%= user.name %></li>
      <% end %>
    </ul>
    """
  end
end

This example shows a live component that displays a list of users, which can be dynamically updated.

Getting Started

To start using Phoenix LiveView:

Add LiveView to your Phoenix project's dependencies:

# mix.exs
def deps do
  [
    {:phoenix_live_view, "~> 0.18.3"},
    # ...
  ]
end

Run mix deps.get to install the dependency.
Configure your app to use LiveView in config/config.exs:

config :my_app, MyAppWeb.Endpoint,
  live_view: [signing_salt: "YOUR_SECRET_SALT"]

Add LiveView to your browser's JavaScript in assets/js/app.js:

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
liveSocket.connect()

Now you're ready to start building LiveView components in your Phoenix application!

Competitor Comparisons

livewire

22,320

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Pros of Livewire

Easier integration with existing Laravel applications
More familiar syntax for PHP developers
Simpler learning curve for those already using Laravel

Cons of Livewire

Limited to PHP and Laravel ecosystem
Potentially slower performance due to server-side rendering
Less flexibility in terms of real-time updates

Code Comparison

Livewire:

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
}

Phoenix LiveView:

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def handle_event("increment", _, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end

Key Differences

Phoenix LiveView uses Elixir, while Livewire uses PHP
LiveView has a more functional programming approach
Livewire integrates closely with Laravel's component system
Phoenix LiveView offers better performance for real-time updates
Livewire has a larger community due to PHP's popularity

Both frameworks aim to simplify building interactive web applications with server-side rendering and real-time updates. The choice between them often depends on the existing tech stack, team expertise, and specific project requirements.

turbo

6,701

The speed of a single-page web application without having to write any JavaScript

Pros of Turbo

Language-agnostic: Works with any backend framework, not limited to Elixir/Phoenix
Easier integration with existing JavaScript-heavy applications
Simpler learning curve for developers familiar with traditional web development

Cons of Turbo

Less real-time capabilities out of the box compared to Phoenix LiveView
Requires more manual management of state and DOM updates
May lead to more complex server-side code to handle partial page updates

Code Comparison

Turbo (JavaScript):

import { Turbo } from "@hotwired/turbo-rails"
Turbo.start()

document.addEventListener("turbo:load", () => {
  // Initialize JavaScript for the current page
})

Phoenix LiveView (Elixir):

defmodule MyAppWeb.LiveView do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def handle_event("increment", _, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end

Both Turbo and Phoenix LiveView aim to provide dynamic, reactive user interfaces with minimal JavaScript. Turbo offers broader compatibility and easier integration with existing apps, while Phoenix LiveView provides more powerful real-time features and a more cohesive development experience within the Elixir/Phoenix ecosystem.

alpine

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

Pros of Alpine

Lightweight and easy to learn, with a smaller learning curve than Phoenix LiveView
Can be incrementally adopted into existing projects without a full framework switch
Works well with other JavaScript libraries and frameworks

Cons of Alpine

Less powerful for complex, real-time applications compared to Phoenix LiveView
Limited built-in features for handling server-side state and updates
May require more manual optimization for large-scale applications

Code Comparison

Alpine:

<div x-data="{ open: false }">
    <button @click="open = true">Open Modal</button>
    <div x-show="open">Modal Content</div>
</div>

Phoenix LiveView:

def render(assigns) do
  ~L"""
  <button phx-click="open_modal">Open Modal</button>
  <%= if @modal_open do %>
    <div>Modal Content</div>
  <% end %>
  """
end

def handle_event("open_modal", _, socket) do
  {:noreply, assign(socket, modal_open: true)}
end

Alpine focuses on declarative, client-side interactivity, while Phoenix LiveView manages state on the server and pushes updates to the client. Alpine's syntax is more compact and JavaScript-like, whereas Phoenix LiveView uses Elixir and HTML templates with special attributes for real-time updates.

stimulus-use

1,474

A collection of composable behaviors for your Stimulus Controllers

Pros of stimulus-use

Lightweight and focused on enhancing Stimulus controllers
Easy integration with existing JavaScript-based projects
Provides a set of composable behaviors for common UI patterns

Cons of stimulus-use

Limited to Stimulus framework ecosystem
Less comprehensive than Phoenix LiveView for full-stack real-time features
Requires more manual setup for real-time functionality

Code Comparison

Phoenix LiveView:

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view

  def render(assigns) do
    ~L"""
    <div>
      <h1>Count: <%= @count %></h1>
      <button phx-click="increment">+</button>
    </div>
    """
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def handle_event("increment", _, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end

stimulus-use:

import { useClickOutside } from 'stimulus-use'

export default class extends Controller {
  static targets = ['menu']

  connect() {
    useClickOutside(this, { element: this.menuTarget })
  }

  clickOutside(event) {
    this.menuTarget.classList.remove('is-active')
  }
}

Phoenix LiveView offers a more integrated, server-side approach to real-time UI updates, while stimulus-use enhances client-side Stimulus controllers with reusable behaviors. The choice between them depends on project requirements, existing tech stack, and desired level of server-side integration.

inertia

6,371

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

Pros of Inertia

Language-agnostic: Works with multiple backend frameworks (Laravel, Rails, etc.) and frontend libraries (Vue, React, Svelte)
Familiar development experience: Uses standard server-side routing and controllers
Easier integration with existing applications: Can be gradually adopted without a full rewrite

Cons of Inertia

Increased initial page load time: Full page reloads on navigation
Limited real-time capabilities: Lacks built-in WebSocket support
Steeper learning curve: Requires understanding of both server-side and client-side technologies

Code Comparison

Phoenix LiveView:

def mount(_params, _session, socket) do
  {:ok, assign(socket, count: 0)}
end

def handle_event("increment", _, socket) do
  {:noreply, update(socket, :count, &(&1 + 1))}
end

Inertia (Laravel + Vue.js):

public function index()
{
    return Inertia::render('Counter', ['count' => 0]);
}

public function increment()
{
    return Inertia::render('Counter', ['count' => request('count') + 1]);
}

Both frameworks aim to simplify building interactive web applications, but they take different approaches. Phoenix LiveView focuses on server-rendered, real-time updates using Elixir, while Inertia provides a bridge between server-side and client-side rendering, allowing developers to use their preferred backend and frontend technologies.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Phoenix LiveView

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.

Visit the https://livebeats.fly.dev demo to see the kinds of applications you can build, or see a sneak peek below:

https://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4

After you install Elixir on your machine, you can create your first LiveView app in two steps:

$ mix archive.install hex phx_new
$ mix phx.new demo

Feature highlights

LiveView brings a unified experience to building web applications. You no longer have to split work between client and server, across different toolings, layers, and abstractions. Instead, LiveView enriches the server with a declarative and powerful model while keeping your code closer to your data (and ultimately your source of truth):

Declarative rendering: Render HTML on the server over WebSockets with a declarative model, including an optional LongPolling fallback.
Rich templating language: Enjoy HEEx: a templating language that supports function components, slots, HTML validation, verified routes, and more.
Diffs over the wire: Instead of sending "HTML over the wire", LiveView knows exactly which parts of your templates change, sending minimal diffs over the wire after the initial render, reducing latency and bandwidth usage. The client leverages this information and optimizes the browser with 5-10x faster updates, compared to solutions that replace whole HTML fragments.
Live form validation: LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and specialized recovery.
File uploads: Real-time file uploads with progress indicators and image previews. Process your uploads on the fly or submit them to your desired cloud service.
Rich integration API: Use the rich integration API to interact with the client, with phx-click, phx-focus, phx-blur, phx-submit, and phx-hook included for cases where you have to write JavaScript.
Optimistic updates and transitions: Perform optimistic updates and transitions with JavaScript commands via Phoenix.LiveView.JS.
Loose coupling: Reuse more code via stateful components with loosely-coupled templates, state, and event handling â a must for enterprise application development.
Live navigation: Enriched links and redirects are just more ways LiveView keeps your app light and performant. Clients load the minimum amount of content needed as users navigate around your app without any compromise in user experience.
Latency simulator: Emulate how slow clients will interact with your application with the latency simulator.
Robust test suite: Write tests with confidence alongside Phoenix LiveView built-in testing tools. No more running a whole browser alongside your tests.

Learning

Check our comprehensive docs to get started.

The Phoenix framework documentation also keeps a list of community resources, including books, videos, and other materials, and some include LiveView too.

Also follow these announcements from the Phoenix team on LiveView for more examples and rationale:

Installation

LiveView is included by default in all new Phoenix v1.6+ applications and later. If you have an older existing Phoenix app and you wish to add LiveView, see the previous installation guide.

What makes LiveView unique?

LiveView is server-centric. You no longer have to worry about managing both client and server to keep things in sync. LiveView automatically updates the client as changes happen on the server.

LiveView is first rendered statically as part of regular HTTP requests, which provides quick times for "First Meaningful Paint", in addition to helping search and indexing engines.

Then LiveView uses a persistent connection between client and server. This allows LiveView applications to react faster to user events as there is less work to be done and less data to be sent compared to stateless requests that have to authenticate, decode, load, and encode data on every request.

When LiveView was first announced, many developers from different backgrounds got inspired by the potential unlocked by LiveView to build rich, real-time user experiences. We believe LiveView is built on top of a solid foundation that makes LiveView hard to replicate anywhere else:

LiveView is built on top of the Elixir programming language and functional programming, which provides a great model for reasoning about your code and how your LiveView changes over time.
By building on top of a scalable platform, LiveView scales well vertically (from small to large instances) and horizontally (by adding more instances). This allows you to continue shipping features when more and more users join your application, instead of dealing with performance issues.
LiveView applications are distributed and real-time. A LiveView app can push events to users as those events happen anywhere in the system. Do you want to notify a user that their best friend just connected? This is easily done without a single line of custom JavaScript and with no extra external dependencies (no extra databases, no Redis, no extra message queues, etc.).
LiveView performs change tracking: whenever you change a value on the server, LiveView will send to the client only the values that changed, drastically reducing the latency and the amount of data sent over the wire. This is achievable thanks to Elixir's immutability and its ability to treat code as data.

Browser Support

All current Chrome, Safari, Firefox, and MS Edge are supported. IE11 support is available with the following polyfills:

$ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-js

Note: The shim-keyboard-event-key polyfill is also required for MS Edge 12-18.

Note: The event-submitter-polyfill package is also required for MS Edge 12-80 & Safari < 15.4.

// assets/js/app.js
import "mdn-polyfills/Object.assign"
import "mdn-polyfills/CustomEvent"
import "mdn-polyfills/String.prototype.startsWith"
import "mdn-polyfills/Array.from"
import "mdn-polyfills/Array.prototype.find"
import "mdn-polyfills/Array.prototype.some"
import "mdn-polyfills/NodeList.prototype.forEach"
import "mdn-polyfills/Element.prototype.closest"
import "mdn-polyfills/Element.prototype.matches"
import "mdn-polyfills/Node.prototype.remove"
import "child-replace-with-polyfill"
import "url-search-params-polyfill"
import "formdata-polyfill"
import "classlist-polyfill"
import "new-event-polyfill"
import "@webcomponents/template"
import "shim-keyboard-event-key"
import "event-submitter-polyfill"
import "core-js/features/set"
import "core-js/features/url"

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
...

Contributing

We appreciate any contribution to LiveView.

Please see the Phoenix Code of Conduct and Contributing guides.

Running the Elixir tests:

$ mix deps.get
$ mix test

Running all JavaScript tests:

$ npm run setup
$ npm run test

Running the JavaScript unit tests:

$ cd assets
$ npm install
$ npm run test
# to automatically run tests for files that have been changed
$ npm run test.watch

or simply:

$ npm run setup
$ npm run js:test

Running the JavaScript end-to-end tests:

$ npm run setup
$ npm run e2e:test

Checking test coverage:

$ npm run cover
$ npm run cover:report

JS contributions are very welcome, but please do not include an updated priv/static/phoenix_live_view.js in pull requests. The maintainers will update it as part of the release process.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot