Multiple nodes & 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:

Drag Text Input, AI Content Analyzer, and Text Output onto the canvas.
Connect the text output of Text Input to the Content to Analyze input of AI Content Analyzer.
Connect the analyzed_content output of AI Content Analyzer to the Text Input port of Text Output.
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 →