Your First Livewire Component

A Livewire component is a plain PHP class paired with a Blade view. The class holds state and behavior; the view renders it. When something on the page happens — a click, a keystroke, a form submit — Livewire sends that back to the server, reruns the component's render() method, and swaps in the new HTML, all without a full page reload and without you writing any JavaScript.

Generate one with artisan:

php artisan make:livewire Counter

That creates two files. The class:

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

And the view:

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Drop it into any Blade page with <livewire:counter />, and it works immediately: clicking the button calls increment() on the server, $count updates, and Livewire re-renders just that component's HTML in the browser.

Every public property on the class is automatically available in the view and persists between requests as part of the component's state — you never manually pass data into the view like you would with a normal Blade template. That single idea, public properties as reactive state, is the foundation everything else in Livewire builds on.