Overview

Want to master Phoenix LiveView through working examples? This by-example guide teaches 95% of Phoenix LiveView through 85 annotated code examples organized by complexity level.

What Is By-Example Learning?

By-example learning is an example-first approach where you learn through annotated, runnable code rather than narrative explanations. Each example is self-contained, immediately executable in your Phoenix application, and heavily commented to show:

• What each line does - Inline comments explain the purpose and mechanism
• Expected outputs - Using # => notation to show socket states and DOM updates
• State transitions - Socket assigns and component lifecycle made visible
• Key takeaways - 1-2 sentence summaries of core patterns

This approach is ideal for developers with Elixir and Phoenix experience who want to quickly understand LiveView’s real-time capabilities, state management patterns, and interactive features through working code.

Unlike narrative tutorials that build understanding through explanation and storytelling, by-example learning lets you see the code first, run it second, and understand it through direct interaction. You learn by doing, not by reading about doing.

Learning Path

  %% Color Palette: Blue #0173B2, Orange #DE8F05, Teal #029E73, Purple #CC78BC, Brown #CA9161
graph TD
    A["Beginner<br/>Examples 1-30<br/>Core Concepts"] --> B["Intermediate<br/>Examples 31-60<br/>Forms & State"]
    B --> C["Advanced<br/>Examples 61-85<br/>Production Patterns"]

    style A fill:#0173B2,color:#fff
    style B fill:#DE8F05,color:#fff
    style C fill:#029E73,color:#fff

Progress from LiveView fundamentals through forms and state management to advanced patterns like PubSub, file uploads, and JavaScript interop. Each level builds on the previous, increasing in sophistication and introducing more real-time web development patterns.

Coverage Philosophy

This by-example guide provides 95% coverage of Phoenix LiveView through practical, annotated examples. The 95% figure represents the depth and breadth of concepts covered, not a time estimate—focus is on outcomes and understanding, not duration.

What’s Covered

• Core LiveView - Mount lifecycle, socket state, assigns, rendering with HEEx
• Templates and rendering - HEEx syntax, dynamic content, conditionals, loops, function components
• Events and interactivity - Click events, form events, key events, debouncing, throttling
• Forms and validation - Changesets, live validation, error display, file uploads
• State management - Temporary assigns, streams, pagination, live navigation
• Real-time features - PubSub subscriptions, broadcast updates, multi-user sync
• LiveComponents - Stateful components, lifecycle, component communication, slots
• JavaScript interop - JS commands, client hooks, pushEvent/handleEvent
• Testing - LiveView testing patterns, form testing, component testing
• Production patterns - Handle_params, telemetry, rate limiting, session management

What’s NOT Covered

This guide focuses on Phoenix LiveView specifically, not the broader Phoenix ecosystem. For additional topics:

• Phoenix fundamentals - Routing, controllers, Ecto covered in Phoenix tutorials
• Elixir language - Pattern matching, processes, OTP covered in Elixir tutorials
• Deep framework internals - LiveView source code, protocol implementation details
• Deployment specifics - Production deployment covered in Phoenix deployment guides

The 95% coverage goal maintains humility—no tutorial can cover everything. This guide teaches the core LiveView patterns that unlock the remaining 5% through your own exploration and project work.

How to Use This Guide

1. Sequential or selective - Read examples in order for progressive learning, or jump to specific topics when building real-time features
2. Run everything - Implement examples in your Phoenix application to see real-time updates yourself
3. Modify and explore - Change event handlers, add assigns, break things intentionally. Learn through experimentation.
4. Use as reference - Bookmark examples for quick lookups when implementing interactive features
5. Complement with narrative tutorials - By-example learning is code-first; pair with comprehensive tutorials for deeper explanations

Best workflow: Open your Phoenix application in one window, this guide in another. Implement each example as you read it. When you encounter something unfamiliar, run the example, modify it, see what changes.

Relationship to Other Tutorials

Understanding where by-example fits in the tutorial ecosystem helps you choose the right learning path:

By Example vs. Quick Start: By Example provides 95% coverage through examples vs. Quick Start’s 5-30% through a single project. By Example is code-first reference; Quick Start is hands-on introduction.

By Example vs. Beginner Tutorial: By Example is code-first for experienced Elixir/Phoenix developers; Beginner Tutorial is narrative-first for developers new to real-time web. By Example shows patterns; Beginner Tutorial explains concepts.

By Example vs. Cookbook: By Example is learning-oriented (understand patterns); Cookbook is problem-solving oriented (fix specific issues). By Example teaches LiveView; Cookbook provides solutions.

Prerequisites

Required:

• Elixir proficiency - Comfortable with pattern matching, processes, modules
• Phoenix fundamentals - Understand routing, controllers, Ecto, templates
• Ability to run Phoenix applications - Can start a Phoenix server and navigate to LiveViews

Recommended (helpful but not required):

• Familiarity with reactive web frameworks (React, Vue, Svelte)
• Understanding of WebSocket communication
• Experience with server-side rendering concepts

No prior LiveView experience required - This guide assumes you’re new to LiveView but experienced with Elixir and Phoenix. You should be comfortable reading Elixir code, understanding Phoenix applications, and learning through hands-on experimentation.

Structure of Each Example

Every example follows this consistent format:

### Example N: Concept Name

Brief explanation of the concept in 2-3 sentences. Explains **what** the LiveView pattern is and **why** it matters for real-time web applications.

[OPTIONAL: Mermaid diagram when state transitions or component relationships need visualization]

**Code**:

```elixir
defmodule MyAppWeb.ExampleLive do
  use MyAppWeb, :live_view

  # Mount callback - initializes socket state
  def mount(_params, _session, socket) do
    # Initial assigns set here
    socket = assign(socket, :count, 0) # => count is 0
    {:ok, socket} # => LiveView mounted, ready to render
  end

  # Event handler - updates state from user interaction
  def handle_event("increment", _params, socket) do
    # Update count assign
    socket = update(socket, :count, &(&1 + 1)) # => count incremented by 1
    {:noreply, socket} # => Re-render with new state
  end

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

**Key Takeaway**: 1-2 sentence summary highlighting the most important insight or pattern from this example.

The brief explanation provides context. The code is heavily annotated with inline comments and # => output notation showing socket state changes. The key takeaway distills the pattern to its essence.

Mermaid diagrams appear when visual representation clarifies state transitions - showing lifecycle flows, component hierarchies, or event propagation. Not every example needs a diagram; they’re used strategically to enhance understanding.

Learning Strategies

For React/Vue Developers

You’re used to component state and reactive updates. LiveView will feel familiar yet fundamentally different:

• Server-side state: State lives on server, not client browser
• Automatic diffing: LiveView handles DOM updates, no virtual DOM needed
• Event binding: Use phx-* attributes instead of onClick handlers
• No JavaScript required: Most interactions work without custom client code

Focus on Examples 1-10 (mount and lifecycle), Examples 11-20 (templates and rendering), and Examples 21-30 (events) to build LiveView intuition.

For HTMX Users

You understand HTML-over-the-wire. LiveView extends this with persistent connections:

• WebSocket instead of polling: Persistent connection for instant updates
• Stateful interactions: Server maintains state between interactions
• Real-time updates: PubSub enables multi-user synchronization
• Component composition: Reusable LiveComponents for complex UIs

Focus on Examples 31-40 (forms), Examples 51-55 (PubSub), and Examples 61-70 (LiveComponents) to leverage your HTML-first mindset.

For Traditional Server-Side Developers

You’re used to request/response cycles. LiveView maintains connection state:

• Persistent connections: WebSocket keeps connection alive between interactions
• No full page reloads: Only changed parts of DOM update
• Socket state: Think session state but with automatic synchronization
• Event-driven updates: User actions trigger server functions that update UI

Focus on Examples 1-15 (core concepts), Examples 41-50 (state management), and Examples 71-75 (JavaScript interop) to understand the LiveView model.

For Elixir Backend Developers

You know Elixir and Phoenix. LiveView adds real-time interactivity:

• Processes for connections: Each LiveView is a GenServer process
• Assigns as state: Socket assigns are like GenServer state
• Pattern match events: Handle_event uses pattern matching like handle_call
• PubSub for broadcast: Phoenix.PubSub enables real-time multi-user features

Focus on Examples 51-55 (PubSub), Examples 61-70 (LiveComponents), and Examples 81-85 (production patterns) to see LiveView’s OTP foundations.

Code-First Philosophy

This tutorial prioritizes working code over theoretical discussion:

• No lengthy prose: Patterns are demonstrated, not explained at length
• Runnable examples: Every example runs in a Phoenix LiveView application
• Learn by doing: Understanding comes from implementing and modifying code
• Pattern recognition: See the same patterns in different contexts across 85 examples

If you prefer narrative explanations, complement this guide with comprehensive LiveView tutorials. By-example learning works best when you learn through experimentation.

Ready to Start?

Jump into the beginner examples to start learning Phoenix LiveView through code:

• Beginner Examples (1-30) - Core concepts, templates, events, interactivity
• Intermediate Examples (31-60) - Forms, state management, PubSub, file uploads
• Advanced Examples (61-85) - LiveComponents, JavaScript interop, testing, production patterns

Each example is self-contained and runnable. Start with Example 1, or jump to topics that interest you most.