$flow Magic

$flow is an Alpine.js magic property available inside any flowCanvas() scope. It provides programmatic access to the nearest flow canvas instance, returning the full Alpine data object with all reactive state and methods.

<div x-data="flowCanvas({ nodes: [...], edges: [...] })">
  <button @click="$flow.addNodes({ id: 'new', position: { x: 100, y: 100 }, data: { label: 'New' } })">
    Add Node
  </button>
</div>

$flow works from any descendant element -- it walks up the DOM to find the nearest [data-flow-canvas] container. If used outside a flowCanvas() scope, it logs a warning and returns an empty object.

Sections

Quick Reference

All $flow methods and properties at a glance:

Reactive State

Methods