VisualFlowCustom Nodes
Turn any React component into a node with handles, inputs and live state.
Intermediate · 9 min read · Updated Oct 31, 2026
Why custom nodes
Real products need nodes that look like their domain: an API call with a method badge, a table with columns, an AI step with a model picker. Custom nodes are just React components.
Defining a node
Register the component in a nodeTypes object declared outside your component so its identity is stable.
tsx
function ApiNode({ data }) {
return (
<div className="api-node">
<Handle type="target" position={Position.Left} />
<span className="method">{data.method}</span> {data.path}
<Handle type="source" position={Position.Right} />
</div>
);
}
const nodeTypes = { api: ApiNode };Interactive content
Add the nodrag class to inputs and selects so typing doesn't start a drag.