FlowForge Flow Builder Demo

An open-source starter kit for building visual workflow canvases. Drag nodes onto a canvas, connect them, edit their properties, and export the flow as JSON. Built entirely from scratch with community libraries — no proprietary dependencies.

Features

• 6 node types: Manual Start, Cron Start, Condition, Delay, Switch, End
• Drag-and-drop from sidebar or click to add
• Branching: YES / NO routing (Condition) and multi-way routing (Switch)
• Editable properties panel with live preview
• Custom smooth-step edges with hover-to-delete
• Save / load support (currently logs to console)

Tech Stack

Layer	Technology
Canvas	@xyflow/react (React Flow v12)
UI	Tailwind CSS + custom shadcn/ui primitives
State	zustand v5
Icons	lucide-react
Build	Vite 7 + React 18 + TypeScript 5

Getting Started

# install dependencies
npm install

# start dev server (http://localhost:5173)
npm run dev

# type-check + production build
npm run build

# preview production build
npm run preview

Project Structure

src/
  types/index.ts       # TypeScript types (NodeKind, BuilderNodeData, uid)
  store/index.ts       # Zustand store (selected node, condition result)
  utils.ts             # Defaults per node kind + createNode helper
  data/initialFlow.ts  # Demo graph loaded on startup
  components/
    nodes/             # One file per node type + nodeTypes map
    CustomEdge.tsx     # Smooth-step edge with hover-delete
    Sidebar.tsx        # Left palette (Start Triggers + Flow nodes)
    ConfigPanel.tsx    # Right panel for editing selected node
    FlowCanvas.tsx     # ReactFlow canvas, drag/drop, save wiring
    Header.tsx         # Top bar: name, save, close
    ui/                # Button, Input primitives
  App.tsx              # Root layout + save handler
  main.tsx             # Entry point
  index.css            # Tailwind + React Flow overrides

How It Works

1. Add nodes - Drag from the sidebar or click a node type to append it below the last node.
2. Connect - Drag from a source handle (bottom of a node) to a target handle (top of another).
3. Edit - Click any node to open the Config Panel on the right. Change label, delay seconds, keywords, cases, etc.
4. Delete edges - Hover over an edge to reveal the delete button at its midpoint.
5. Save - Click Save Flow in the header. The JSON payload is logged to the browser DevTools Console.

JSON Format

A saved flow is an object with name, nodes, and edges. Each node carries a data.kind and kind-specific fields:

• manual / cron / end: { kind, label }
• condition: { kind, label, conditionType, keywords, matchType }
• delay: { kind, label, delaySeconds }
• switch: { kind, label, cases }

Edges reference source/target node IDs and optional sourceHandle values ("true", "false", "case-0", etc.).

Roadmap

• Replace console save with a real API endpoint (POST /api/flows)
• Add load support to hydrate the canvas from saved JSON
• Add undo/redo, validation, and node search
• Add more node types (Send Message, AI Agent, etc.)