react-flow-node-ts

Define a data interface extending Record<string, unknown>, create a typed Node with your type identifier, then build a memoized component that renders Handle components for connections. Register the component in the canvas nodeTypes map.

Import Handle and Position from React Flow, then render a Handle with type="target" for inputs and type="source" for outputs, setting the position (Top, Bottom, Left, Right) for each connection point.

Yes, nodes can select store state and actions with useAppStore hooks, such as an updateNode action for persisting changes and a canvasMode value to control editing behavior like resizer visibility.

Render the NodeResizer component inside your node and control its visibility with the isVisible prop, typically tied to the node's selected state and the current canvas editing mode.

Register the component in the canvas nodeTypes map, export it from the nodes index file, add its type definition to the shared types module, and include defaults in the store plus entries in any add-node menus.