WireFlow

Livewire components for AlpineFlow — build interactive flow diagrams in Laravel with zero JavaScript.

Install

composer require getartisanflow/wireflow
php artisan wireflow:install

Quick Start

// 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>

Features

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
WithWireFlow trait 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 @connect events
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

Configuration

php artisan vendor:publish --tag=wireflow-config

// config/wireflow.php
return [
    'theme' => 'default', // 'default', 'flux', or 'structural'
];

Acknowledgments

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.

Author

Created by Zac Hiler.

License

MIT

Wireflow Laravel Package