Introduction

What Nitro does

• The server renders the first page. Blade renders it, so it appears quickly and search engines can read all of it.
• The browser takes over from there. Clicks, typing, filtering and re-rendering all happen in the page, without a request.
• The server is one attribute away. When a method needs the database, mail or the session, mark it #[Server]. It then runs on the server, with the component's signed state.
• Rendering is fine-grained. A change updates only the parts of the page that show it. There is no virtual DOM and no HTML diffing.

A first component

The counter above is a class and a view. The increment() method runs in the browser, so clicking it doesn't send anything to the server. The save() method is marked #[Server], so it runs on the server. It keeps the count in the session and sends the new state back. When the page loads again, mount() reads the count back, so it survives a reload. Open Compiled to see the JavaScript that Nitro makes from them.

<?php

namespace App\Nitro\Components;

use Nitro\Attributes\Locked;
use Nitro\Attributes\Server;
use Nitro\Attributes\Validate;
use Nitro\Component;

class Counter extends Component
{
    #[Validate('integer|min:0|max:1000')]
    public int $count = 0;

    #[Locked]
    public string $savedAt = '';

    public function mount(): void
    {
        $this->count = session('counter.count', 0);
        $this->savedAt = session('counter.saved_at', '');
    }

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

    #[Server]
    public function save(): void
    {
        $this->savedAt = now()->format('H:i:s');

        // This demo keeps the count in the session. Your app would save it to the database.
        session(['counter.count' => $this->count, 'counter.saved_at' => $this->savedAt]);
    }
}

<div class="flex flex-wrap items-center gap-3">
    <button nitro:click="increment" class="rounded-lg bg-slate-900 px-3.5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">
        Count: {{ $count }}
    </button>
    <button nitro:click="save" nitro:loading.attr="disabled" class="rounded-lg px-3.5 py-2 text-sm font-semibold text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50 disabled:opacity-50 dark:text-slate-200 dark:ring-white/15 dark:hover:bg-white/5">
        Save on the server
    </button>
    <span class="text-sm text-slate-500">{{ $savedAt === '' ? 'Not saved yet' : 'Saved at '.$savedAt.'. Reload the page and it stays.' }}</span>
    @error('count')
        <span class="text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
    @enderror
</div>

You can place the component in any Blade view with its tag:

<nitro:counter />

Where your code runs

Every part of a component runs in one place. If you put code in the wrong place, Nitro tells you. For example, a browser method that queries the database fails the build, and the error names the file and line.

Requirements

• PHP 8.3 or higher
• Laravel 13
• Node.js and esbuild, for production builds (nitro:build) only

Nitro's browser versions of Laravel's helpers (Str::, route(), __()) follow Laravel 13, so earlier Laravel versions are not supported. Nitro uses only Laravel's public APIs. It can also run on the same page as Livewire, because its tags, attributes, scripts and endpoints all use the nitro: prefix.

Next steps