alpineflow v0.1.2-alpha wireflow v0.1.2-alpha

The flowchart engine
Alpine.js never had.

Node-based UIs built with directives you already know.
Animation engine included. Open source.

INTERACTIVE
pipeline.blade.php
<!-- Directive-driven API -->
<div x-data="flowCanvas({
    nodes: [
        { id: 'trigger', position: { x: 80, y: 140 }, data: { label: 'Trigger' } },
        { id: 'validate', position: { x: 360, y: 60 }, data: { label: 'Validate' } },
        { id: 'transform', position: { x: 360, y: 220 }, data: { label: 'Transform' } },
        { id: 'dispatch', position: { x: 640, y: 140 }, data: { label: 'Dispatch' } },
    ],
    edges: [
        { id: 'e1', source: 'trigger', target: 'validate', animated: true },
        { id: 'e3', source: 'validate', target: 'transform' },
        { id: 'e4', source: 'transform', target: 'dispatch', animated: true },
    ],
    background: 'dots',
})" class="flow-container">
  <div x-flow-viewport>
    <template x-for="node in nodes" :key="node.id">
      <div x-flow-node="node">
        <div x-flow-handle:target></div>
        <span x-text="node.data.label"></span>
        <div x-flow-handle:source></div>
      </div>
    </template>
  </div>
</div>
Features

Everything you need, nothing you don't

Purpose-built for the TALL stack. Not a port — a native engine.

x-flow-*

Directive-driven

Viewport, node, edge, handle — all Alpine directives. No render functions, no JSX.

animate()

Animation engine

Timeline sequencing, particles, camera follow, path animations. Single rAF loop.

validate()

Deep nesting

Parent/child hierarchies with type validation, min/max children, and auto-stacking layout.

wire:model

Zero-JS Livewire

WireFlow ships via Composer. Blade components, three sync modes, server-side validation.

route()

Smart routing

Avoidant and orthogonal edge routing. Edges path around nodes automatically.

boost

AI-ready docs

Ships with Laravel Boost skills. Your AI companion understands the API out of the box.

Whiteboard

Draw on the canvas

Freehand, highlighter, arrows, shapes, and text — built-in annotation tools. Try it yourself.

Whiteboard addon
INTERACTIVE
whiteboard.blade.php
Freehand, highlighter, arrows, and eraser — all stored as nodes.
INTERACTIVE
animation.blade.php
Hub-and-spoke orbit — 4 satellites, one method call, single rAF loop.
Animation Engine

Motion, built in

Orbit, wave, pendulum, drift — path functions that move nodes along curves. One method call, runs in a single rAF loop.

Animation docs
Packages

Two packages, one ecosystem

Use AlpineFlow standalone or pair it with WireFlow for full Laravel integration.

Frontend Engine

AlpineFlow

The flowchart engine Alpine.js never had. Directive-driven, reactive, with a full animation system.

  • → Alpine directives & $flow magic
  • → Animation engine & timeline
  • → Parent/child validation
  • → Smart edge routing
  • → TypeScript, zero dependencies
AlpineFlow docs
Laravel Integration

WireFlow

The Livewire companion. Zero-JS install via Composer, full server-side state sync.

  • → Blade components & wire:model
  • → Three sync modes
  • → Server-side connection validation
  • → WithWireFlow trait
  • → Livewire 4 compatible
WireFlow docs
boost
Ships with Laravel Boost skills. AI-optimized documentation so Claude Code and Cursor understand your flowchart API out of the box.