Flow Studio
Custom Node Renderer Overview
Building a new node type requires both a frontend renderer (what the user sees on the canvas) and a backend executor (what runs when the workflow executes). This guide covers the frontend renderer. The typeCode is the string that links everything.
What You Need to Build
| Layer | What to Build | Guide |
|---|---|---|
| Database + Form | NodeType record in DB + Atlas Form for configuration | Guide 12 |
| Frontend renderer | React class extending BaseNode, registered in WorkflowCanvas.nodeTypes | This guide |
| Backend executor | C# class implementing IProcessElementExecution | Guide 14 |
The TypeCode Contract
Every layer uses the same typeCode string to identify the node kind. All three must match:
// 1. NodeType DB record
typeCode: "my-custom-node"
// 2. Frontend canvas registration
const nodeTypes = {
'my-custom-node': withNodeHooks(MyCustomNode)
}
// 3. Backend DI registration
services.AddTransient<IProcessElementExecution, MyCustomNodeExecutor>();
// MyCustomNodeExecutor.TypeCode = "my-custom-node"Built-In Renderer Reference
Four built-in renderers cover most node shapes:
| Renderer | Shape | Use For |
|---|---|---|
CustomNode | Rectangle with header bar | Most integration and data nodes |
CircleNode | Circle | Trigger and terminal nodes |
DiamondNode | Diamond | Decision/gateway nodes (if, switch) |
AIAgentNode | Rectangle with multiple handle groups | Multi-handle AI nodes |
If your node fits one of these shapes, you can use the built-in renderer by setting shape in the NodeType template — no custom renderer code needed.