getartisanflow/wireflow

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

v0.1.2-alpha 2026-04-03 18:46 UTC

Requires

• php: ^8.3
• illuminate/support: ^11.0|^12.0|^13.0
• livewire/livewire: ^3.0|^4.0

Requires (Dev)

• orchestra/testbench: ^11.0
• pestphp/pest: ^4.4
• pestphp/pest-plugin-laravel: ^4.1

MIT

• Zac Hiler

• flow
• laravel
• diagram
• livewire
• alpineflow
• wireflow

README

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