Livewire components for AlpineFlow — build interactive flow diagrams in Laravel with zero JavaScript.
composer require getartisanflow/wireflow
php artisan wireflow:install// In your Livewire component
use ArtisanFlow\WireFlow\Concerns\WithWireFlow;
class MyFlowEditor extends Component
{
use WithWireFlow;
public array $nodes = [
['id' => '1', 'position' => ['x' => 0, 'y' => 0], 'data' => ['label' => 'Start']],
['id' => '2', 'position' => ['x' => 200, 'y' => 100], 'data' => ['label' => 'End']],
];
public array $edges = [
['id' => 'e1', 'source' => '1', 'target' => '2'],
];
}<x-flow :nodes="$nodes" :edges="$edges">
<x-slot:node>
<div x-flow-handle:target.top></div>
<span x-text="node.data.label"></span>
<div x-flow-handle:source.bottom></div>
</x-slot:node>
</x-flow>- 12 Blade components matching AlpineFlow directives:
<x-flow>,<x-flow-handle>,<x-flow-panel>,<x-flow-toolbar>,<x-flow-drag-handle>,<x-flow-resizer>, and more WithWireFlowtrait for Livewire components with 50+ flow methods- Three sync modes: static, entangled, and collab
WireFlow::js()for client-side JavaScript callbacks- Server-side connection validation via
@connectevents - Bundled AlpineFlow assets — no npm install required
- Artisan install command (
php artisan wireflow:install) - Publishable configuration with theme support (default, flux, structural)
- Collaboration support with ReverbProvider
- Livewire 3 and 4 compatible
- Laravel 11, 12, and 13 compatible
php artisan vendor:publish --tag=wireflow-config// config/wireflow.php
return [
'theme' => 'default', // 'default', 'flux', or 'structural'
];WireFlow is built on top of AlpineFlow, which was inspired by React Flow and its core architecture. Special thanks to the React Flow team for pioneering the open-source node-based UI space.
Follow the journey of building AlpineFlow and WireFlow at zachiler.dev.
Created by Zac Hiler.
MIT