---
title: "Multiple nodes & categories"
description: "Build a fully-functional editor with multiple node types and categories."
source: https://flowdrop.io/docs/tutorials/04-multiple-nodes-and-categories
site: FlowDrop documentation
---
# Multiple nodes & categories
<Info>
  **What you'll learn**

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

{/* TODO: live demo — interactive editor with multiple nodes (step="multiple-nodes"); omitted in the initial port. */}

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:

```js
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](/tutorials/03-your-first-node) · [Next: Saving workflows →](/tutorials/05-saving-workflows)