Reactive components written in PHP and Blade, in the style of Livewire, with one big
difference: the component runs in the browser. PHP 8.4 is compiled to WebAssembly, so a
click, a keystroke or a re-render needs no request. Only the methods you mark #[Server] run
on your Laravel app, and the browser calls them like functions.
<?php
use Unscripted\Ui\{Component, State};
new class extends Component {
#[State] public int $count = 0;
public function increment(): void
{
$this->count++;
}
};
?>
<button u-on:click="increment">+</button>
<span>{{ $count }}</span>
Two packages make it up: @mtjncn/ui, the
component framework that runs in the browser, and
unscripted/ui-server, the Laravel side
that serves components, renders them on the server first, and runs their #[Server] methods.
Getting started
- Quickstart: a counter, then a todo list with a database, in ten minutes.
- Installation: the package, the page's scripts, and what you need.
- Coming from Livewire: what's the same, what's different, and why.
Essentials
- Components: files, templates, putting them on a page, partials.
- Properties: state, computed properties, the query string.
- Actions: methods the page calls, events and their modifiers.
- Server methods: running code on the server, loaders, errors.
- Forms: binding inputs, and validation in the browser and on the server.
- Events: components talking to each other, and to JavaScript.
- Lifecycle hooks: code that runs as a component mounts, renders and updates.
- Nested components: children with their own state.
Features
- Loading states: showing that something's waiting on the server.
- Polling: refreshing on a timer, and loading once a component appears.
- Pagination: paging through query results.
- File uploads: uploads with progress, kept safe until you store them.
- Streaming: text from the server as it's made, such as an AI reply.
- Navigation: moving between pages without loading PHP again.
- Live updates: every open page updating when data changes.
- Server rendering: HTML on first load, and lazy components.
- WebSockets: calls over Laravel Reverb instead of HTTP.
Advanced
- Security: what the browser can see and call, and how to lock it down.
- Testing: driving components in PHPUnit.
- Configuration:
config/unscripted.php. - How it works: stubs, rendering, morphing, and the limits that follow.