Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Livewire Uncovered

Livewire can often feel like magic. Somehow, you're able to write interactive web applications using only PHP? How? Well, in this series, we're going to uncover the magic together by building a simplified version of Livewire from scratch.

Aside from being plain entertaining, this exercise will arm you with deep Livewire knowledge that will help you build and debug your apps in your daily life. Let's dive in!

Progress

Series Info

Episodes
15
Run Time
2h 53m
Difficulty
Advanced
Last Updated
Jul 7, 2022
Version
Livewire 2
Play Series

Series Episodes

  1. Getting Started (3)

    1. Series Introduction

      Before we construct our own version of Livewire from scratch, let's first build a basic component using the actual Livewire framework to familiarize ourselves and establish a goal for this series.

    2. Starting From Scratch

      Now that we have a working "counter" component, let's remove the Livewire package from our application powering it, and start building our own version as a replacement. We'll start by getting the initial page to properly render.

    3. Refactoring Our Work

      Before we continue on, let's take what we've written so far, add a few extra niceties, and establish the code structure we're going to use for the rest of the series.
  2. Building the Core (5)

    1. Storing a Snapshot

      To provide the experience of a Livewire component being "live," we need to create and store a snapshot of the component's state in JavaScript, so we can send it back to the server before the next interaction.

    2. Triggering a Server Round-Trip

      It's JavaScript time! To support features like wire:click, we need to listen for page interactions using JavaScript, and trigger a network request to the server containing everything it needs to update our "counter" component.

    3. Handling a Request

      Using the snapshot sent to our backend via JavaScript, we're going to re-create our Livewire component in PHP and call the "increment" method on it. Then we'll send the updated HTML and snapshot back to the browser to update the page.

    4. Complete the Round Trip

      Using the data returned from the backend, we can now complete the round-trip and update our component's HTML on the page using JavaScript.

    5. Intelligently Updating the Page

      In the last episode, we updated the component on the page by replacing its HTML with what was returned from the server. This appears to work fine, but upon further inspection, this strategy is extremely restricting. Instead, we need to intelligently update only the parts of the HTML that need to be changed, rather than wiping it out completely with each request. Let's figure out how.
  3. Adding More Features (4)

    1. Build a To-Do Component

      Our counter component has served us well so far, but to continue building more powerful features in Livewire - like wire:model - we'll need to work with a different example component: a simple to-do list page.

    2. Supporting wire:model

      The wire:model syntax in Livewire is a convenient way to bind data from your component to input elements on the page. It's considered an essential Livewire feature, and therefore, we stand to benefit greatly from understanding how it works at a fundamental level.

    3. Lifecycle Hooks

      Lifecycle hooks like mount and updated are important features of Livewire that allow developers to customize how a component is initialized and later updated. Fortunately, supporting these features is simpler than you might expect.

    4. Supporting Complex Component Properties

      Our simplified version of Livewire only supports setting public properties to data types that are common to both PHP and JavaScript (strings, integers, arrays, etc.). Let's discuss what it might take to support setting something like an Eloquent Model or a Laravel Collection as public property on our component.
  4. Wrapping Up (2)

    1. Hacking Livewire

      What we've built so far, though functional, is actually incredibly insecure. You'll be surprised how easily we can hack into our database using nothing but the "to-do" component that we have on the page. After attacking our application, we'll plug up those security holes and learn about crucial pieces of Livewire security.

    2. Comparison With the Real Livewire

      Now that we have a functioning version of Livewire, let's take a side-by-side look at the similarities and differences between our version and the real one. Now that you've completed this exercise, you'll have a MUCH easier time understanding, inspecting, and contributing to the actual Livewire codebase.
  5. Extra Credit (1)

    1. MorphDom From Scratch

      In Episode 8, we introduced the use of Alpine's "morph" plugin. This black box has served us well, but there is a lot to be gained by more fully understanding how it works. Because building it from scratch was too complicated to tackle during the series, I've added a bonus episode where we can take our time and dive deep into this important function of Livewire.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes