Flow Canvas

A powerful, dual-mode React diagramming library that combines free-form design tools (like Canva) with structured node-based workflows

Features

• Dual-Mode Engine:
  • Design Mode: Free-form resizing, rotating, and snapping for design elements.
  • Workflow Mode: Structured nodes with handles and strict connection logic.
• Infinite Canvas: Zoomable, pannable, and virtually infinite workspace.
• Performance Optimized: Viewport culling (virtualization) for thousands of nodes and edges.
• Customizable: Fully stylable nodes and edges using standard CSS/SCSS.
• Interactive: Drag, drop, resize, rotate, and connect interactions built-in.

Installation

npm i @jeevandev/flow-canvas

Basic Usage

Wrap your application in the Editor context and render the Canvas.

import React from 'react';
import { Editor, Canvas, NodeLayer } from 'flow-canvas';
import 'flow-canvas/style.css'; // Import default styles

// 1. Define Nodes
const initialNodes = [
  { id: '1', type: 'default', x: 100, y: 100, data: { label: 'Node A' } },
  { id: '2', type: 'input', x: 400, y: 200, data: { label: 'Node B' } }
];

// 2. Define Edges
const initialEdges = [
  { id: 'e1', source: '1', target: '2' }
];

const App = () => {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Editor initialNodes={initialNodes} initialEdges={initialEdges}>
        <Canvas>
             <NodeLayer />
        </Canvas>
      </Editor>
    </div>
  );
};

Configuration

You can customize the editor behavior via the config prop:

<Editor
  config={{
    viewOnly: false,
    pan: true,
    zoom: true,
    snapping: true,
    showGrid: true,
    gridSize: 20,
    gridColor: '#e5e7eb',
    snapGuide: true, // Visual alignment guides
    isLimited: false, // Infinite canvas if false
  }}
>
  ...
</Editor>

Creating Custom Nodes

Design Node (Resizable & Rotatable)

Any node with resizable: true or rotatable: true automatically gets the Design wrappers.

const nodes = [
  {
    id: 'design-1',
    type: 'custom',
    x: 100, y: 100, 
    width: 200, height: 200,
    resizable: true,
    rotatable: true,
    doubleClickToEdit: true, // Prevents interaction until double-click
    data: { ... }
  }
];

Workflow Node (Logic & Connections)

Standard nodes usually just need handles.

// Custom Component
const MyNode = ({ data }) => {
  return (
    <div className="my-node">
       <Handle type="target" position="left" />
       {data.label}
       <Handle type="source" position="right" />
    </div>
  );
};

License

MIT