AlpineFlow

The flowchart engine that AlpineJS never had — a directive-driven, open-source package that brings the power of node-based UIs to Alpine developers without forcing them into React or Vue. Built with Claude by Anthropic as an AI collaborator, inspired by ReactFlow, and powered by xyflow's MIT-licensed core, it's designed to feel like Caleb Porzio built it himself.

Under the hood, AlpineFlow is written in TypeScript and follows Alpine's conventions to the letter. The API is built around directives (x-flow-viewport, x-flow-node, x-flow-edge, x-flow-handle), a flowCanvas() data component, a $flow magic for convenient access, and Alpine.store('flow') for global state. If you know Alpine, you already know how to read an AlpineFlow template.

It doesn't just match ReactFlow — it goes further. AlpineFlow ships with a full animation engine featuring animate(), FlowTimeline sequencing, sendParticle() for edge particles, follow() for camera tracking, path animations (orbit, wave, pendulum, drift), avoidant and orthogonal edge routing, storyboarding, and edge gradients. The animation system runs on a shared AnimationEngine with a single requestAnimationFrame loop, bypassing Alpine's reactivity entirely for performance.

AlpineFlow was designed from day one to pair with WireFlow, a Livewire companion package that wraps everything in Blade components. WireFlow gives TALL stack developers a zero-JavaScript way to build flow-based interfaces entirely in PHP and Blade, with three sync modes to control how much the server is involved. Because Alpine is so lightweight, AlpineFlow also works with any backend or frontend setup — it's not locked to Laravel.

The whole ecosystem lives under ArtisanFlow at artisanflow.dev (coming soon), with both packages free and open source.