DEV Community

Cover image for Getting Started with Phoenix LiveView: Building Real-Time UI with Elixir
HexShift
HexShift

Posted on

Getting Started with Phoenix LiveView: Building Real-Time UI with Elixir

#elixir #ui #webdev #programming

Getting Started with Phoenix LiveView: Building Real-Time UI with Elixir

Phoenix LiveView allows you to build dynamic, real-time user interfaces with Elixir and the Phoenix framework without needing to write JavaScript. In this tutorial, we’ll go over how to get started with Phoenix LiveView, create a simple dynamic UI, and understand the core concepts.

Step 1: Install Phoenix LiveView

First, ensure you have the necessary dependencies for Phoenix LiveView:

  1. Install Phoenix if you haven't already: 
mix archive.install hex phx_new
Enter fullscreen mode Exit fullscreen mode
  1. Create a new Phoenix project: 
mix phx.new liveview_example --live
cd liveview_example
mix phx.server
Enter fullscreen mode Exit fullscreen mode
  1. Phoenix LiveView is included by default with the --live flag. If you're adding it manually: 
defp deps do
  [
    {:phoenix_live_view, "~> 0.17.5"}
  ]
end
Enter fullscreen mode Exit fullscreen mode

Run:

mix deps.get
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a Simple LiveView

Now, let’s create a basic LiveView that displays real-time updates. We'll build a live counter:

# lib/liveview_example_web/live/counter_live.ex
defmodule LiveviewExampleWeb.CounterLive do
  use Phoenix.LiveView

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

  def handle_event("increment", _value, socket) do
    {:noreply, assign(socket, count: socket.assigns.count + 1)}
  end

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

Step 3: Set Up the Route for LiveView

In your router, map the LiveView to a route:

# lib/liveview_example_web/router.ex
defmodule LiveviewExampleWeb.Router do
  use LiveviewExampleWeb, :router

  live "/", LiveviewExampleWeb.CounterLive
end
Enter fullscreen mode Exit fullscreen mode

Step 4: Run the App

Start the Phoenix server:

mix phx.server
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:4000 in your browser. You’ll see a counter that updates in real time as you click the button.

Step 5: LiveView Interactivity with Forms

You can also use LiveView to handle form inputs in real-time. Here's an example of a dynamic form that updates as you type:

defmodule LiveviewExampleWeb.FormLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, name: "")}
  end

  def handle_event("update", %{"name" => name}, socket) do
    {:noreply, assign(socket, name: name)}
  end

  def render(assigns) do
    ~L"""
    <div>
      <input type="text" phx-change="update" placeholder="Enter your name" />
      <p>Hello, <%= @name %>!</p>
    </div>
    """
  end
end
Enter fullscreen mode Exit fullscreen mode

Route it like this:

live "/form", LiveviewExampleWeb.FormLive
Enter fullscreen mode Exit fullscreen mode

✅ Pros and ❌ Cons of Phoenix LiveView

✅ Pros:

  • ⚡ Real-time updates with minimal client-side code
  • 🧠 Full control over UI updates in Elixir (no JavaScript)
  • 🛠 Easy integration with Phoenix's existing ecosystem
  • 🚀 Performance optimized for low-latency user interactions

❌ Cons:

  • 🧩 Limited client-side interactivity compared to JavaScript frameworks
  • 📈 High server load for large-scale real-time apps
  • 🔄 More complex to manage interactive client-side behavior

Summary

Phoenix LiveView allows you to build dynamic, real-time applications with Elixir, eliminating the need for much client-side JavaScript. By leveraging Elixir’s concurrency model and Phoenix’s powerful features, LiveView brings simplicity and power to your web apps.

For a more in-depth guide on scaling interfaces and UI patterns with Phoenix LiveView, check out my 20-page PDF guide, "Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns," available on Gumroad for just $10:

Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns

If this was helpful, you can also support me here: Buy Me a Coffee ☕

Top comments (0)