Workflow Editor

A React-based visual workflow editor built with React Flow, inspired by n8n. Create, edit, and export complex workflows using a drag-and-drop interface with custom node types.

Features

• Visual Workflow Canvas: Drag-and-drop interface powered by React Flow
• Custom Node Types: Extensible node system defined by JSON schemas
• Parameter Editing: Click nodes to edit their parameters in a dedicated panel
• Export/Import: Save workflows as JSON files and load them later
• Categorized Node Palette: Organized by functionality (data, communication, logic, etc.)
• TypeScript Support: Fully typed for better development experience

Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd workflow-editor

2. Install dependencies:

npm install

3. Start the development server:

npm start

The application will open at http://localhost:3000 (or the next available port).

Usage

Adding Nodes

1. Browse Node Palette: The left sidebar contains all available node types organized by category
2. Filter by Category: Use the dropdown to filter nodes by category (data, communication, logic, etc.)
3. Add Node: Click any node type to add it to the canvas

Editing Node Parameters

1. Select Node: Click any node on the canvas to select it
2. Edit Parameters: The right panel will show all configurable parameters for the selected node
3. Parameter Types: Support for various input types:
   • Text inputs
   • Number inputs
   • Dropdowns/Select
   • Textareas for longer text
   • JSON objects
   • Arrays (one item per line)
   • Checkboxes for boolean values

Connecting Nodes

1. Drag from Handles: Click and drag from output handles (right side) to input handles (left side)
2. Handle Types: Color-coded by connection type:
   • 🟡 Orange: Trigger connections
   • 🟢 Green: Data connections
   • 🔴 Red: Error connections

Managing Workflows

1. Naming: Edit the workflow name in the top toolbar
2. Export: Click "💾 Export" to download the workflow as a JSON file
3. Import: Click "📁 Import" to load a previously saved workflow
4. Clear: Click "🗑️ Clear" to start fresh (with confirmation)

Node Types

The application includes several built-in node types:

Data Nodes

• HTTP Request: Make API calls with configurable methods, headers, and body
• Database Query: Execute SQL queries with connection and timeout settings

Communication Nodes

• Email Sender: Send emails using templates or custom content

Logic Nodes

• Condition: Route workflow execution based on conditional logic

Creating Custom Node Types

Node types are defined as JSON files in src/data/nodeTypes/. Each file defines:

{
  "id": "unique-node-id",
  "name": "Display Name",
  "description": "What this node does",
  "category": "data|communication|logic|etc",
  "icon": "🌐",
  "color": "#3b82f6",
  "inputs": [
    {
      "id": "input-id",
      "name": "Input Name",
      "type": "trigger|data|error"
    }
  ],
  "outputs": [
    {
      "id": "output-id",
      "name": "Output Name",
      "type": "trigger|data|error"
    }
  ],
  "parameters": [
    {
      "id": "param-id",
      "name": "Parameter Name",
      "type": "string|number|boolean|select|textarea|object|array",
      "required": true,
      "default": "default-value",
      "placeholder": "Placeholder text",
      "options": ["option1", "option2"] // for select type
    }
  ]
}

Adding New Node Types

1. Create a new JSON file in src/data/nodeTypes/
2. Import it in src/features/workflow/hooks/useNodeTypes.ts
3. Add it to the nodeTypes array

Project Structure

src/
├── components/           # Shared components
├── features/
│   └── workflow/
│       ├── components/   # Workflow-specific components
│       ├── hooks/        # React hooks and context
│       └── types/        # TypeScript type definitions
├── data/
│   └── nodeTypes/        # Node type JSON definitions
└── types/                # Global TypeScript types

Technology Stack

• React with TypeScript
• React Flow for the visual editor
• Context API for state management
• CSS-in-JS for styling
• UUID for unique identifiers

Export Format

Workflows are exported as JSON with the following structure:

{
  "id": "workflow-uuid",
  "name": "Workflow Name",
  "description": "Optional description",
  "nodes": [...],
  "edges": [...],
  "createdAt": "ISO-date",
  "updatedAt": "ISO-date",
  "version": "1.0.0"
}

This format is designed to be consumed by Rails applications or other backend systems.

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time.

Contributing

1. Add new node types by creating JSON schema files
2. Extend the parameter input types in ParameterPanel.tsx
3. Add new connection types by updating the TypeScript types

License

This project is licensed under the MIT License.