Livewire 4 and Laravel 13: Reactive Components Without Writing JavaScript

Livewire 4 landed on January 14, 2026 with single-file components, Route::livewire(), and islands, and two months later Laravel 13 completed the stack: today you can build a reactive interface with PHP and Blade without writing a single line of JavaScript. This tutorial covers what changed since v3 and how to build a search box with filters in under an hour.

What Livewire Is and Why It Matters in 2026

Livewire is a full-stack framework for Laravel that lets you build dynamic components with plain PHP and Blade templates. Every user interaction is sent to the server, the component is re-evaluated, and the DOM updates selectively. You write the logic in PHP and the framework handles the JavaScript required under the hood.

The Server-Driven Approach vs. SPAs

Single-page applications built with React or Vue split the frontend from the backend, duplicate validation logic, and force you to maintain an API. Livewire's server-driven approach keeps everything on the server: state, business rules, and rendering. For teams that already know Laravel and Blade, this removes the context switch and reduces the code to maintain, at the cost of slightly higher latency per interaction.

What v4 Adds Over v3

Version 4, presented by Caleb Porzio as the biggest release to date, changes the conventions: single-file components become the recommended format, full pages can be declared directly in the routes file with Route::livewire(), and rendering is controlled with $this->view(). It also adds islands to isolate expensive parts of the page, built-in drag and drop, optimistic UI, and scoped CSS and JavaScript by default. The stated goal is less friction and better defaults.

Installation: Livewire 4 + Laravel 13 in Minutes

Livewire 4 requires PHP 8.3 or newer, the same minimum requirement as Laravel 13, so in a fresh project the install comes down to two commands:

composer require livewire/livewire
php artisan make:livewire SearchBox

The second command generates a sample component you can use to verify everything works. Livewire integrates with Blade without extra configuration: its JavaScript and styles are injected automatically into views that use components.

Single-File Components: The New Convention

Before v4, every component was split into two files: the PHP class and the Blade view. Version 4 flips that and proposes a single PHP file that holds the logic and, at the end, the template.

Anatomy of a Single-File Component

<?php

namespace App\Livewire;

use Livewire\Component;

class SearchBox extends Component
{
    public string $query = '';

    public function render()
    {
        return $this->view('livewire.search-box');
    }
}

The template lives in the same directory, as resources/views/livewire/search-box.blade.php, and receives the component's data. This structure reduces file hopping and makes each component self-contained, which is especially handy when the team works with many small components.

When to Stick with the Multi-File Format

The classic class-plus-view format is still available and makes sense in specific cases: when the view is reused by several components, when the template is very long, or when your team policy prefers separating logic from presentation. v4 does not force a big-bang migration; it coexists with the old format, although new projects should start with the single-file convention.

Full Pages with Route::livewire()

Livewire 4 lets you assign a component directly to a route and turn it into a full page without an intermediate controller:

use App\Livewire\SearchBox;

Route::livewire('/search', SearchBox::class)
    ->layout('components.layouts.app')
    ->title('Search');

The component receives route parameters as arguments of its mount() method, and you can set the layout, page title, and middleware right in the route definition. For pages that are a single component, you remove a controller and a wrapper view.

Islands: Isolated Rendering for Expensive Parts

An island is a section of the page that renders independently and is not re-evaluated when other components change. It is Livewire's answer to a classic problem: a sidebar with heavy data used to recalculate entirely on every interaction with the main component. By marking that part as an island, the framework renders it once and leaves it alone, keeping interactions fast even when expensive queries are around.

Built-In Optimistic UI and Drag & Drop

v4 ships utilities for two UI patterns that used to require manual work. Optimistic UI updates the screen immediately with the user's optimistic state and rolls back if the server request fails. Drag and drop arrives as a layer on top of list components: reordering items, moving them between lists, and persisting the new order works without external libraries. Both are optional, but they cover the cases that generated the most custom JavaScript.

Hands-On: a Search Component with Filters and an Island

To see it all together, create a component that filters a list of articles as you type. The key is wire:model.live, which syncs the property with the server on every keystroke:

<input type="search" wire:model.live="query" placeholder="Search articles...">

<ul>
    @foreach($articles as $article)
        <li>{{ $article->title }}</li>
    @endforeach
</ul>

In the class, the render() method queries articles filtered by the query property. If you also have an expensive block, such as blog statistics, wrap it in an island so it does not recalculate on every keystroke:

<livewire:island>
    <livewire:blog-stats />
</livewire:island>

With this you get a reactive search with filters and an isolated zone that only updates when its own data changes, all in PHP and Blade.

Conclusion

Livewire 4 with Laravel 13 brings interactivity back to PHP: single-file components, direct routes, islands, and optimistic UI cover most reactive interface needs without leaving the Blade ecosystem. If you are coming from Vue or React, start with a small wire:model.live component and add islands when performance demands it. Keep reading the blog for more Laravel and web development tutorials.