Node Palette Overview
The Node Palette is Flow Studio's catalog of all available workflow building blocks. Accessible from the left toolbar, it organises 20+ node types into categories, supports search, and lets you drag nodes directly onto the canvas.
Opening the Palette
The palette lives in the Left Toolbar. Click the toolbar edge icon (or press N when the canvas has focus) to expand the palette drawer. It stays open until you click elsewhere or close it manually.
How the Palette Is Built
Node types are loaded from the backend API on application startup:
// nodeTypeApiClient.ts
GET /api/v1/flow-studio/node-types
→ NodeType[]
// Result is cached in:
workflowStore.nodeTypes: Map<string, NodeType>
The palette groups node types by their category field into collapsible sections. Each section is sorted alphabetically by displayName.
Node Categories
| Category | Shape | Node Types |
|---|---|---|
| Trigger | Circle | manual-trigger, webhook-trigger, schedule-trigger, form-trigger |
| Logic | Diamond | if-condition, switch, filter, loop, break, continue, try-catch |
| User Interaction | Rectangle (rounded) | form, chat, chat-receive, approval |
| Data | Rectangle | variable-assignment, json-transform, data-mapping, merge, split, aggregate |
| Integration | Rectangle (icon) | http-request, graphql, database nodes (MySQL, PostgreSQL, SQL Server, MongoDB, Redis) |
| Notification | Rectangle (icon) | send-email, slack-message, teams-message, discord-message |
| File | Rectangle (icon) | read-file, write-file, delete-file |
| AI | Special multi-handle | ai-agent, openai-llm, anthropic-chat, sub-workflow, parallel-fork, parallel-join |
Node Card Anatomy
Each node in the palette is displayed as a card with:
- Icon — Category-specific icon (Font Awesome)
- Name — Human-readable display name (e.g., "HTTP Request")
- Description — One-line description of what the node does
- Port indicator — Small dots showing how many input/output ports the node has
- Star / Favourite — Click the star to pin this node to the top of the palette
The NodeFactoryService
When you drag a node from the palette to the canvas, NodeFactoryService.createNode() is called to construct a WorkflowNode instance from the NodeType template:
// NodeFactoryService.ts
createNode(nodeType: NodeType, position: XYPosition): WorkflowNode {
return {
id: generateId(),
type: nodeType.typeCode,
position,
data: {
label: nodeType.displayName,
config: { ...nodeType.defaultConfig },
ports: nodeType.portDefinitions
}
};
}