React Flow Node

Create React Flow node components following established patterns with proper TypeScript types and store integration.

Quick Start

Copy templates from assets/ and replace placeholders:

• {{NodeName}} → PascalCase component name (e.g., VideoNode )

• {{nodeType}} → kebab-case type identifier (e.g., video-node )

• {{NodeData}} → Data interface name (e.g., VideoNodeData )

Templates

• assets/template.tsx - Node component

• assets/types.template.ts - TypeScript definitions

Node Component Pattern

export const MyNode = memo(function MyNode({ id, data, selected, width, height, }: MyNodeProps) { const updateNode = useAppStore((state) => state.updateNode); const canvasMode = useAppStore((state) => state.canvasMode);

return ( <> <NodeResizer isVisible={selected && canvasMode === 'editing'} /> <div className="node-container"> <Handle type="target" position={Position.Top} /> {/* Node content */} <Handle type="source" position={Position.Bottom} /> </div> </> ); });

Type Definition Pattern

export interface MyNodeData extends Record<string, unknown> { title: string; description?: string; }

export type MyNode = Node<MyNodeData, 'my-node'>;

Integration Steps

• Add type to src/frontend/src/types/index.ts

• Create component in src/frontend/src/components/nodes/

• Export from src/frontend/src/components/nodes/index.ts

• Add defaults in src/frontend/src/store/app-store.ts

• Register in canvas nodeTypes

• Add to AddBlockMenu and ConnectMenu