Building Real-Time Dashboards with Phoenix LiveView

Phoenix LiveView offers an elegant solution for creating real-time dashboards, allowing you to build dynamic user interfaces with live data updates without writing a single line of JavaScript. In this article, we’ll build a simple real-time dashboard that displays live statistics, such as server load and active user count, using Phoenix LiveView.

Step 1: Create a New Phoenix Project

If you don’t already have a Phoenix project, create a new one with the LiveView option:

mix phx.new live_dashboard --live
cd live_dashboard
mix phx.server

This command sets up a Phoenix application with LiveView support. If you're adding LiveView to an existing project, ensure the dependency is included in your mix.exs:

defp deps do
  [
    {:phoenix_live_view, "~> 0.17.5"}
  ]
end

Run mix deps.get to fetch and compile your dependencies.

Step 2: Create a LiveView for the Dashboard

Now, let’s create a LiveView that will display real-time data on our dashboard. We'll simulate some live statistics, such as server load and active users, and update them periodically.

Create a new file dashboard_live.ex:

# lib/live_dashboard_web/live/dashboard_live.ex
defmodule LiveDashboardWeb.DashboardLive do
  use Phoenix.LiveView

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

  def handle_info(:refresh, socket) do
    # Simulating dynamic data
    load = :rand.uniform(100)
    active_users = :rand.uniform(50)
    schedule_refresh()
    {:noreply, assign(socket, load: load, active_users: active_users)}
  end

  def render(assigns) do
    ~L"""

      <h1>Real-Time Dashboard</h1>

        <h2>Server Load: &lt;%= @load %&gt;%</h2>


        <h2>Active Users: &lt;%= @active_users %&gt;</h2>


    """
  end

  defp schedule_refresh do
    Process.send_after(self(), :refresh, 1000) # Refresh every second
  end
end

Step 3: Set Up the Route for the Dashboard

In your router.ex, define the route for the dashboard LiveView:

# lib/live_dashboard_web/router.ex
defmodule LiveDashboardWeb.Router do
  use LiveDashboardWeb, :router

  live "/dashboard", LiveDashboardWeb.DashboardLive
end

Step 4: Run the Server

Now, run the Phoenix server to see the real-time dashboard in action:

mix phx.server

Navigate to http://localhost:4000/dashboard in your browser. You should see a live dashboard that updates every second, displaying the simulated server load and active user count.

✅ Pros and ❌ Cons of Building Real-Time Dashboards with Phoenix LiveView

✅ Pros:

• ⚡ Real-time data updates with minimal client-side code
• 🧠 Keeps your server-side logic in Elixir, making your app easier to manage
• 🚀 Built-in performance optimizations for real-time updates
• 🛠 Easy to integrate into your existing Phoenix app without complex JavaScript

❌ Cons:

• 📈 Scaling challenges with large numbers of real-time updates or users
• 🧩 Limited client-side interactivity compared to using JavaScript frameworks like React or Vue.js
• 🔄 Complex UI components may require additional integration

Summary

Phoenix LiveView provides a powerful and efficient way to build real-time applications without relying on JavaScript frameworks. In this tutorial, we created a simple real-time dashboard that updates its statistics every second, allowing you to monitor live data on the server. Phoenix LiveView takes care of all the real-time interactions, making it an excellent choice for building scalable, low-latency applications.

If you want to dive deeper into creating scalable and interactive Phoenix LiveView apps, check out my 20-page PDF guide:

Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns available for $10.

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