WireFlow

The Livewire companion to AlpineFlow — a zero-JavaScript bridge that lets Laravel developers build interactive flowcharts, diagrams, and node-based UIs entirely in PHP and Blade. One composer require, no npm, no build step. If you can write a Livewire component, you can build a flow.

WireFlow provides a set of Blade components (<x-wire-flow>, <x-wire-flow-handle>, <x-wire-flow-panel>, <x-wire-flow-toolbar>, and more) that compile down to AlpineFlow's directives under the hood. It never reimplements flow logic — it's a thin translation layer that keeps AlpineFlow as the single source of truth for rendering, dragging, connecting, and animating. If you ever need full control, you can drop down to raw AlpineFlow directives at any point. They work inside WireFlow components without conflict.

The WithWireFlow trait gives your Livewire components PHP methods for every flow operation — flowPatch(), flowAnimate(), flowSendParticle(), flowFollow(), flowFitView(), flowAddNodes(), flowUndo(), flowRedo(), and more. Server-side control without writing a line of JavaScript.

Three sync modes let you choose exactly how much the server is involved. Full bidirectional sync uses $entangle internally for real-time two-way state binding — ideal for editors and builders. Selective event-driven mode fires Livewire actions only on specific interactions like @connect or @node-drag-end, keeping the server light. Server-authoritative mode uses flowPatch() and flowAnimate() for one-way server-to-client updates — perfect for dashboards, monitoring tools, and pipeline visualizations.

Connection validation is handled through a declarative PHP rule engine. Define your rules as arrays in PHP, and WireFlow compiles them into client-side JavaScript at render time. No server round-trips, no latency, full flexibility.

WireFlow was planned from AlpineFlow's very first architecture conversation. Every directive, every data structure, every API decision in AlpineFlow was made knowing this bridge was coming. It's not an afterthought bolted on — it's the reason AlpineFlow's API is as clean as it is.