Skip to main content
Phoenix LiveView is included by default in Phoenix 1.6+ applications. If you’re creating a new app, you’re all set! For existing applications, this guide will walk you through adding LiveView.

​
New Phoenix applications

LiveView ships by default in new Phoenix applications (v1.6+). No additional installation is required.
After you install Elixir on your machine, create your first LiveView app in two steps: 
mix archive.install hex phx_new
mix phx.new demo
That’s it! Your new Phoenix app includes:
  • LiveView dependencies in mix.exs
  • Client-side JavaScript for WebSocket connections
  • Routing configuration
  • Core Components for common UI elements
Start your app with mix phx.server and begin building LiveViews.

​
Existing Phoenix applications

If you have an existing Phoenix application (v1.6+) without LiveView, follow these steps to add it.
1

Add dependencies

Add phoenix_live_view to your mix.exs dependencies:
defp deps do
  [
    {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0"},
    {:phoenix_live_view, "~> 1.0"},
    {:phoenix_html, "~> 3.3 or ~> 4.0 or ~> 4.1"},
    {:phoenix_template, "~> 1.0"},
    {:telemetry, "~> 0.4.2 or ~> 1.0"},
    # ... other dependencies
  ]
end
Then install the dependencies:
mix deps.get
2

Update your endpoint configuration

Update your endpoint configuration in config/config.exs to include live view signing salt:
config :my_app, MyAppWeb.Endpoint,
  # ... existing config
  live_view: [signing_salt: "YOUR_SECRET_SALT"]
Generate a unique signing salt:
mix phx.gen.secret 32
Copy the output and use it as your signing salt.
3

Configure the LiveView socket

In your endpoint file lib/my_app_web/endpoint.ex, add a LiveView socket:
defmodule MyAppWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :my_app

  # Add this socket declaration:
  socket "/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [session: @session_options]]

  # ... rest of your endpoint config
end
4

Add LiveView to your router

Import LiveView helpers in your router:
defmodule MyAppWeb.Router do
  use MyAppWeb, :router
  import Phoenix.LiveView.Router

  # ... rest of your router
end
5

Install JavaScript dependencies

Add the LiveView JavaScript client to your assets/package.json:
{
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  }
}
Install the JavaScript dependencies:
cd assets && npm install
6

Configure the JavaScript client

Update your assets/js/app.js to connect to the LiveView socket:
// Import Phoenix and LiveView
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"

// Get the CSRF token from the page meta tag
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

// Create and connect the LiveSocket
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken}
})

// Connect if there are any LiveViews on the page
liveSocket.connect()

// Expose liveSocket for web console debugging
window.liveSocket = liveSocket
7

Add CSRF meta tag

Ensure your root layout (lib/my_app_web/templates/layout/root.html.heex or similar) includes the CSRF meta tag in the <head>:
<meta name="csrf-token" content={get_csrf_token()} />
This is required for LiveView to authenticate connections.
8

Enable LiveView Flash

Update your app layout to support LiveView flash messages. In your main layout template, add:
<.flash_group flash={@flash} />
Or if using a simpler setup:
<%= if live_flash(@flash, :info) do %>
  <p class="alert alert-info" role="alert"><%= live_flash(@flash, :info) %></p>
<% end %>
<%= if live_flash(@flash, :error) do %>
  <p class="alert alert-danger" role="alert"><%= live_flash(@flash, :error) %></p>
<% end %>

​
Verify installation

Test your LiveView installation by creating a simple LiveView: 
defmodule MyAppWeb.HelloLive do
  use MyAppWeb, :live_view

  def render(assigns) do
    ~H"""
    <div>
      <h1>Hello LiveView!</h1>
      <p>Count: {@count}</p>
      <button phx-click="increment">+</button>
    </div>
    """
  end

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

  def handle_event("increment", _params, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end
Start your server with mix phx.server and visit http://localhost:4000/hello. If you see the counter and can increment it, LiveView is working!

​
Optional: Add LiveView helpers

For a better development experience, add these helpers to your lib/my_app_web.ex file: 
def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {MyAppWeb.Layouts, :app}

    unquote(html_helpers())
  end
end

def live_component do
  quote do
    use Phoenix.LiveComponent

    unquote(html_helpers())
  end
end
Then in your LiveViews, you can use: 
defmodule MyAppWeb.SomeLive do
  use MyAppWeb, :live_view
  # ...
end

​
Troubleshooting

If you see “LiveView not found” or connection errors, check that:
  • The LiveView socket is configured in your endpoint
  • The JavaScript client is properly connected in app.js
  • The CSRF token meta tag is present in your layout
  • WebSocket connections aren’t blocked by your firewall or proxy

​
Common issues

WebSocket connection fails: Ensure your endpoint is configured to handle WebSocket upgrades. Check your web server configuration if using a reverse proxy. “Unauthorized” errors: Verify the CSRF token is correctly passed from the meta tag to the LiveSocket configuration. LiveView not updating: Make sure you’re returning the updated socket from your event handlers with {:noreply, socket}.

​
Next steps

Quickstart tutorial

Build your first interactive LiveView

Assigns and HEEx

Learn about templates and data binding

Form bindings

Build forms with live validation

Generators

Use Phoenix generators for LiveView

Build docs developers (and LLMs) love

Get started for freeTalk to us