Browser APIs

Some things only exist in the browser. Nitro::browser() lets your browser methods use them from PHP. Nitro checks what you write when it builds the bundle, and compiles it to the browser's own calls. The bundle only includes the APIs your application uses. On the server, Nitro::browser() throws an exception.

Nitro is Nitro's facade. In a class, import it with use Nitro\Facades\Nitro;. In a view, write Nitro::browser() as it is: Laravel registers Nitro as an alias, so a view needs no @use.

Type a note, then reload the page. The note was saved in this browser's local storage, and mounted() reads it back. Try copying it to the clipboard. When you move the sliders, the chart is drawn again on the canvas.

The component

<?php

namespace App\Nitro\Components;

use Nitro\Component;
use Nitro\Facades\Nitro;

class BrowserDemo extends Component
{
    public string $note = '';

    public bool $copied = false;

    public array $values = [3, 7, 5, 9];

    /** Runs in the browser once the component is live. It reads the note saved last time, and draws the chart. */
    public function mounted(): void
    {
        $this->note = Nitro::browser()->storage()->get('docs-note', '');
        $this->draw();
    }

    public function updated(string $property): void
    {
        if ($property === 'note') {
            Nitro::browser()->storage()->set('docs-note', $this->note);
            $this->copied = false;
        }

        if (str_starts_with($property, 'values')) {
            $this->draw();
        }
    }

    public function copy(): void
    {
        Nitro::browser()->clipboard()->write($this->note, fn () => $this->copied = true);
    }

    public function draw(): void
    {
        $canvas = Nitro::browser()->canvas('chart')->size(260, 110)->clear()->fillStyle('#3b82f6');

        foreach ($this->values as $i => $value) {
            $canvas->fillRect(12 + $i * 62, 108 - $value * 10, 46, $value * 10);
        }
    }
}

<div class="grid w-full max-w-xl gap-6 text-sm sm:grid-cols-2">
    <div class="space-y-2">
        <label class="block font-medium" for="docs-note">A note, kept in this browser</label>
        <textarea id="docs-note" nitro:model.debounce.300ms="note" rows="3" placeholder="Type, then reload the page" class="w-full rounded-lg bg-white px-3 py-2 ring-1 ring-slate-300 outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-900 dark:ring-white/15"></textarea>
        <button type="button" nitro:click="copy" @disabled($note === '') class="rounded-lg px-3 py-1.5 font-medium ring-1 ring-slate-300 disabled:opacity-50 dark:ring-white/15">{{ $copied ? 'Copied ✓' : 'Copy it' }}</button>
    </div>
    <div class="space-y-2">
        <p class="font-medium">Drawn on a canvas</p>
        <canvas nitro:ref="chart" class="rounded-lg bg-white ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-white/10"></canvas>
        <div class="grid grid-cols-4 gap-2">
            @foreach ($values as $i => $value)
                <input type="range" min="1" max="10" nitro:model.number="values.{{ $i }}" aria-label="Bar {{ $i + 1 }}">
            @endforeach
        </div>
    </div>
</div>

Available APIs

Callbacks are closures. When a callback changes a property, the component renders again as it does for any other change, just like $this->copied = true in the example above.

Using WebSockets

use Nitro\Facades\Nitro;

public function connect(): void
{
    Nitro::browser()->socket('/ws/orders')
        ->onMessage(fn (array $order) => $this->orders[] = $order)
        ->send(['subscribe' => 'orders']);
}

Using an API from a view

nitro:ref gives an element a name that canvas() can use, and nitro:init calls a method once the element appears. An event handler in a view can also call an API directly:

<canvas nitro:ref="chart" nitro:init="draw"></canvas>
<button nitro:click="Nitro::browser()->storage()->forget('draft')">Discard the draft</button>

Next steps