flovue

Headless visual node-based flow editor engine for Vue 3 — an extensible alternative to React Flow.

flovue provides the canvas core: nodes, edges, viewport (pan/zoom), selection, history, command service and a pluggable node-type registry. Everything domain-specific (operations, execution, assets, AI providers...) is wired in by the host application through FlowHostBindings — the package ships zero business logic.

Features

• Canvas engine — pan/zoom viewport, grid, node drag/resize, edge drawing
• Registry-based state — multiple independent canvases per page (useGraphById, useViewportById, ...)
• Extension API — registerNodeTypes, registerPortCompatibility, registerDropHandler, registerMenuContributions
• Command service — typed programmatic API for every canvas operation
• Performance-first — indexed graph state (O(1) lookups), viewport culling at 80+ nodes, CSS containment, shallowRef selections; 400-node graphs run >50 FPS
• Headless by design — fail-fast host bindings instead of hidden fallbacks

Install

pnpm add flovue

Peer dependencies: vue ^3.5, @vueuse/core ^14, lucide-vue-next ^1.

The package ships TypeScript + .vue sources. With Nuxt add it to transpile; Vite handles it out of the box via optimizeDeps/esbuild.

Quick start

import { FlowCanvas, FlowHostBindingsKey } from 'flovue';
import { registerNodeTypes, registerPortCompatibility } from 'flovue';

// 1. provide host bindings (host owns operations/execution/etc.)
app.provide(FlowHostBindingsKey, createHostBindings());

// 2. register your node types
registerNodeTypes({
  input: InputNode,
  output: OutputNode,
});

<FlowCanvas :canvas-id="myId" @... />

Local development

pnpm install
pnpm dev        # playground on http://localhost:5173
pnpm typecheck  # vue-tsc --noEmit

The playground (playground/) contains switchable examples in Storybook style: basic canvas, custom nodes, port compatibility, drop handlers, menus, performance stress-test (15-performance).

HMR uses the alias flovue → ../src/index.ts in playground/vite.config.ts.

License

MIT