Overview

FlowKit is a powerful visual workflow builder and execution engine for the browser. Create, edit, test, and run automation workflows through an intuitive drag-and-drop interface with real-time execution feedback.

Key Features

• 70+ built-in node types - Triggers, actions, conditions, loops, HTTP, email, Slack, AWS, and more
• 15 specialized executors - Each node type has a dedicated executor with validation and configuration
• Real-time execution - Watch workflows run with visual state indicators (pending, running, success, error)
• Variable interpolation - Use {{lastResult.data}} syntax to pass data between nodes
• Full editing suite - Undo/redo (50 levels), copy/paste, multi-select, duplicate, group nodes
• Navigation aids - Minimap, zoom controls, fit-to-view, pan with space+drag
• Multiple exports - JSON (for import), Mermaid (for docs), PNG image (for sharing)
• Customizable canvas - Dot/grid/line patterns, light/dark themes, snap-to-grid, animated edges
• Condition branch colors - Green for true path, red for false path on condition nodes

Installation

NPM

npm install flowkit

CDN

<script src="https://unpkg.com/flowkit/dist/flowkit.umd.js"></script>

ES Module

import { WorkflowBuilder, WorkflowExecutor } from 'flowkit';

Quick Start

import { WorkflowBuilder } from 'flowkit';

// Initialize builder
const container = document.getElementById('app');
const builder = new WorkflowBuilder(container, {
  theme: 'light',
  background: 'dots',
  minimap: true
});

// Add nodes
builder.addNode('trigger', 100, 100);
builder.addNode('action', 300, 100);
builder.addNode('end', 500, 100);

// Connect nodes
builder.connect('1', '2');
builder.connect('2', '3');

// Execute workflow
await builder.runWorkflow();

WorkflowBuilder

The main class for creating and managing visual workflows.

Constructor Options

Example with All Options

const builder = new WorkflowBuilder('#app', {
  theme: 'dark',
  mode: 'edit',
  nodes: ['trigger', 'action', 'condition', 'email', 'http'],
  background: 'grid',
  edgeType: 'bezier',
  minimap: true,
  snapToGrid: true,
  gridSize: 20,
  animatedEdges: true,
  showArrows: true,
  customNodes: {
    myNode: {
      label: 'My Custom Node',
      icon: '⭐',
      category: 'custom',
      inputs: 1,
      outputs: 1,
      fields: []
    }
  },
  onSave: (data) => console.log('Saved:', data),
  onChange: (data) => console.log('Changed:', data)
});

Methods

Node Types

70+ built-in node types organized into categories. Each node can be dragged from the sidebar onto the canvas.

Core Nodes

Integration Nodes

Condition Node (Special)

Condition nodes have two outputs with automatic color coding:

• Output 1 (True/Yes): Green - followed when condition evaluates to true
• Output 2 (False/No): Red - followed when condition evaluates to false

The output dots and connection lines are automatically colored to visually indicate the branch direction.

Executors

Each node type is handled by a specialized executor with specific configuration options. Executors process nodes during workflow execution.

Executor Result Structure

Every executor returns a consistent result object:

{
  success: true,              // Whether execution succeeded
  data: { ... },              // Result data (varies by executor)
  output: 'output_1',         // Which output to follow (for conditions)
  error: null,                // Error message if failed
  nextNodes: ['2']            // IDs of next nodes to execute
}

Custom Executor

Register a custom executor for your node type:

// Register custom executor
builder.registerExecutor('myNode', async (node, context) => {
  const config = node.data;
  
  // Access previous results
  const lastResult = context.variables.lastResult;
  
  // Do work...
  const result = await myCustomLogic(config.option);
  
  return {
    success: true,
    data: result
  };
});

Keyboard Shortcuts

Variable Interpolation

Use {{variable}} syntax to insert dynamic values into any field.

Examples

// In HTTP URL
"https://api.example.com/users/{{lastResult.data.id}}"

// In condition
"{{lastResult.data.status}} == 'active'"

// In email body
"Hello {{lastResult.data.name}}, your order is ready."

Custom Nodes

Register a Custom Node

builder.registerNode('myNode', {
  label: 'My Custom Node',
  icon: '<svg>...</svg>',
  color: '#FF5733',
  inputs: 1,
  outputs: 2,
  fields: [
    { name: 'option', label: 'Option', type: 'select',
      options: [
        { value: 'a', label: 'Option A' },
        { value: 'b', label: 'Option B' }
      ]
    }
  ]
});

Field Types

Connection Styling

Customize the appearance of connections and nodes programmatically.

Default Connection Color

Set the default color for all connections:

// Set default connection color (teal)
builder.setDefaultConnectionColor('#02514a');

// Set to custom color
builder.setDefaultConnectionColor('#FF5733');

Individual Connection Color

Change color of a specific connection:

// Set connection color between node 1 and node 2
builder.setConnectionColor(1, 2, '#8B5CF6');

// With specific output/input classes
builder.setConnectionColor(1, 2, '#EC4899', 'output_1', 'input_1');

Condition Node Colors

Condition nodes (condition, if, decision) have two outputs with automatic coloring:

• Output 1 (True/Success): Green (#22C55E) by default
• Output 2 (False/Error): Red (#EF4444) by default

Customize condition branch colors:

// Set custom colors for condition branches
builder.setConditionColors('#10B981', '#F97316');
// First param: true/success color (output_1)
// Second param: false/error color (output_2)

Node Color

Change the color of individual nodes:

// Set node color
builder.setNodeColor(nodeId, '#FF5733');

Events

Listen to workflow events for integration with your application.

Using Callbacks

const builder = new WorkflowBuilder('#app', {
  onChange: (data) => {
    console.log('Workflow changed:', data);
    // Auto-save, validation, etc.
  },
  onSave: (data) => {
    console.log('Workflow saved:', data);
    // Send to server, show notification, etc.
  }
});

Available Events

Drawflow Events

Access underlying Drawflow events for advanced control:

// Access Drawflow instance
builder.drawflow.on('nodeCreated', (id) => {
  console.log('Node created:', id);
});

builder.drawflow.on('connectionCreated', ({ output_id, input_id }) => {
  console.log('Connected:', output_id, '->', input_id);
});

builder.drawflow.on('nodeMoved', (id) => {
  console.log('Node moved:', id);
});

Examples

Click Examples dropdown in VizFlow to load any of these pre-built workflows.

1. API Request Test

What it does: Makes one API call and transforms the response.

Use case: Quick API endpoint testing, validating response format.

Flow: Trigger → HTTP → Transform → End

// Expected output:
{ "title": "delectus aut autem", "completed": false }

2. Data Pipeline

What it does: Fetches users, filters invalid entries, transforms to clean format.

Use case: Clean contact lists from CRM API for mailing list.

Flow: Trigger → HTTP → Filter → Transform → End

3. Condition Flow

What it does: Routes workflow differently based on API response data.

Use case: Process tickets by status, route orders by type.

Flow: Trigger → HTTP → Condition → (True: Action A | False: Action B) → End

4. Loop Example

What it does: Iterates over array, processing each item individually.

Use case: Process batch orders, send individual emails to list.

Flow: Trigger → Loop → Transform → (back to Loop) → End

// Inside loop, access:
ctx.item   // Current item (e.g., 1, 2, 3...)
ctx.index  // Current index (0, 1, 2...)

5. Notification Flow

What it does: Sends notifications via Email AND Slack simultaneously.

Use case: Alert multiple channels on new order, system events.

Flow: Trigger → HTTP → (Email + Slack) → End

6. Error Handling

What it does: Demonstrates graceful handling of API failures.

Use case: Alert when services are down, retry logic.

Flow: Trigger → HTTP → (Success: Handler | Error: Alert) → End

// Error result structure:
{ "error": "500 Internal Server Error", "ok": false, "status": 500 }

7. Full API Workflow

What it does: Complete API integration with auth, validation, filtering.

Use case: Build user dashboard with filtered content.

Flow: Trigger → HTTP → Condition → HTTP → Transform → Filter → End

8. Data Enrichment

What it does: For each user, fetch posts AND todos, merge together.

Use case: Build complete customer profiles from microservices.

Flow: Trigger → HTTP → Loop → HTTP → Transform → End

9. Multi-Channel Alert

What it does: Monitors API health, sends alerts via Email, Slack, PagerDuty.

Use case: Production monitoring, uptime checks.

Flow: Schedule → HTTP → Condition → (OK: Log | Down: Alert → PagerDuty) → End

10. ETL Pipeline

What it does: Extract-Transform-Load: fetch data, process, save to database.

Use case: Nightly data sync between systems.

Flow: Schedule → HTTP → Filter → Transform → Loop → Database → End

Context Variables

These variables are available in all node configurations:

Interpolation Syntax

// Use {{}} in string fields:
url: 'https://api.example.com/users/{{data.userId}}'
message: 'Processing item {{item.name}} at index {{index}}'

// Use direct JS in code fields:
return data.filter(x => x.active);