react-flow-node-ts

Define a data interface extending Record<string, unknown>, then create a typed Node with your data type and a string literal type identifier. Build a memoized component receiving id, data, and selected props, and render Handle components for connections.

Import Handle and Position from React Flow, then render Handle components inside your node with type set to target or source and a position such as Position.Top or Position.Bottom. Handles define where edges connect to the node.

Yes, Zustand works well for React Flow state management. Select store actions like updateNode inside the node component with useAppStore, and store node defaults in the store so new nodes initialize with consistent data.

Render the NodeResizer component inside your node and control its visibility with the isVisible prop, typically tied to the selected state and an editing canvas mode. The node also needs width and height passed through its props.

Register custom nodes in the nodeTypes object passed to the ReactFlow canvas component, mapping each type string to its component. Also export the component from your nodes index file and add it to any node creation menus.