Custom nodes — how to write your OWN node type on the branded canvas. Every node below is a plain React component registered in nodeTypes, built on the same two parts FlowNode is built on: FlowNodeCard (the node box — selection ring, proxied keyboard focus, tone) and FlowPort (the connector dot — anchor class, and in:<port>/out:<port> ids from its port prop). A tone is flowToneVariants on the card: mark a part data-flow-tone-part="mark" or "ink" to have it follow the tone, and add FlowToneIndicator so the tone is never colour alone. The reasons behind each part live in their own docblocks. Copy the node closest to what you need. Controls inside a node (inputs, switches, buttons) carry React Flow's nodrag class so a click or a text selection does not start a node drag.
Examples
Status States
One node per execution state. The border tints, and `StatusBadge` repeats the state as a glyph and a word.
Labelled Ports
A `FlowPort` per row. Its `port` prop gives it the id `in:<port>` or `out:<port>`, so an edge names the exact port it uses (`sourceHandle` / `targetHandle`).
With Toolbar
Select a node (click, or Tab then Enter) and its actions appear above it. Duplicate and Delete are wired to the flow.
Editable Fields
Inputs and a switch inside the node write to its `data` through `updateNodeData`; the footer reads it back.
Annotation
A note has no handles, so it cannot be wired into the graph — it explains the graph.
Resizable
Select the node and drag a corner. The card fills the box React Flow gives it (`h-full w-full`).
Footer Slot First
Before writing a node at all: `FlowNode` takes a `footer` — a meter, a chip row, a button — and keeps the handles, tones and focus ring for free.