Multiple nodes & categories

Build a fully-functional editor with multiple node types and categories.

What you’ll learn

How to define multiple nodes across categories, understand node types and visual styles, and connect nodes together.

With several nodes defined, the sidebar shows them grouped across categories. Users can build a workflow by dragging nodes onto the canvas and connecting their ports — dragging from an output to an input.

Expanding the node palette

Adding more nodes follows the same pattern from the previous step. Here’s how to define nodes across different categories:

const nodes = [
  // Inputs
  {
    id: 'text_input',
    name: 'Text Input',
    type: 'simple',
    category: 'inputs',
    icon: 'mdi:text',
    color: '#22c55e'
    // ...ports and config
  },
  // Outputs
  {
    id: 'text_output',
    name: 'Text Output',
    type: 'simple',
    category: 'outputs',
    icon: 'mdi:text-box',
    color: '#ef4444'
    // ...ports and config
  },
  // AI & ML
  {
    id: 'ai_content_analyzer',
    name: 'AI Content Analyzer',
    type: 'tool',
    category: 'ai',
    icon: 'mdi:brain',
    color: '#9C27B0'
    // ...ports and config
  },
  // Processing
  {
    id: 'json_transformer',
    name: 'JSON Transformer',
    type: 'tool',
    category: 'processing'
    // ...
  },
  // Logic
  {
    id: 'gateway',
    name: 'Gateway',
    type: 'gateway',
    category: 'logic'
    // ...
  },
  // Helpers
  {
    id: 'notes',
    name: 'Notes',
    type: 'idea',
    category: 'helpers'
    // ...
  }
];

const categories = [
  { id: 'inputs', name: 'Inputs', icon: 'mdi:import', color: '#22c55e' },
  { id: 'outputs', name: 'Outputs', icon: 'mdi:export', color: '#ef4444' },
  { id: 'ai', name: 'AI & ML', icon: 'mdi:brain', color: '#9C27B0' },
  { id: 'processing', name: 'Processing', icon: 'mdi:cog', color: '#3b82f6' },
  { id: 'logic', name: 'Logic', icon: 'mdi:source-branch', color: '#f59e0b' },
  { id: 'helpers', name: 'Helpers', icon: 'mdi:wrench', color: '#fbbf24' }
];

Node types (visual styles)

The type field controls how the node renders on the canvas:

Type	Appearance	Use case
simple	Compact rounded rectangle	Inputs, outputs, basic operations
tool	Rectangle with tool badge and extra ports	API calls, integrations, processing
gateway	Diamond shape	Conditional branching and routing
terminal	Rounded end-cap shape	Start/end points of a workflow
idea	Sticky-note style	Documentation and comments
default	Standard rectangle	General-purpose nodes

A node can support multiple types via supportedTypes, letting users switch between visual styles from the config panel.

Connecting nodes

Nodes connect through ports — the small circles on the edges of each node:

• Output ports (right side) send data out of a node
• Input ports (left side) receive data into a node

To create a connection, drag from an output port to a compatible input port. Compatibility is determined by the dataType field:

Data Type	Compatible With
string	string, mixed
number	number, mixed
json	json, mixed, string
array	array, mixed
mixed	all data types
tool	tool only
trigger	trigger only

FlowDrop validates connections in real-time and only allows compatible port types to connect.

Try it

Build a small workflow in your editor:

1. Drag Text Input, AI Content Analyzer, and Text Output onto the canvas.
2. Connect the text output of Text Input to the Content to Analyze input of AI Content Analyzer.
3. Connect the analyzed_content output of AI Content Analyzer to the Text Input port of Text Output.
4. Try adding a Gateway node to see the diamond shape, or a Notes node for sticky-note documentation.

What’s next

You now have a fully functional editor where users can build workflows. In the next step, you’ll learn how to save those workflows and understand the data structure behind them.

---

Tutorial — Step 4 of 5

← Your first node · Next: Saving workflows →