React Flow Node Ts

1---
2name: react-flow-node-ts
3description: Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
4---
5 
6# React Flow Node
7 
8Create React Flow node components following established patterns with proper TypeScript types and store integration.
9 
10## Quick Start
11 
12Copy templates from [assets/](assets/) and replace placeholders:
13- `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`)
14- `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`)
15- `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`)
16 
17## Templates
18 
19- [assets/template.tsx](assets/template.tsx) - Node component
20- [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions
21 
22## Node Component Pattern
23 
24```tsx
25export const MyNode = memo(function MyNode({
26  id,
27  data,
28  selected,
29  width,
30  height,
31}: MyNodeProps) {
32  const updateNode = useAppStore((state) => state.updateNode);
33  const canvasMode = useAppStore((state) => state.canvasMode);
34  
35  return (
36    <>
37      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
38      <div className="node-container">
39        <Handle type="target" position={Position.Top} />
40        {/* Node content */}
41        <Handle type="source" position={Position.Bottom} />
42      </div>
43    </>
44  );
45});
46```
47 
48## Type Definition Pattern
49 
50```typescript
51export interface MyNodeData extends Record<string, unknown> {
52  title: string;
53  description?: string;
54}
55 
56export type MyNode = Node<MyNodeData, 'my-node'>;
57```
58 
59## Integration Steps
60 
611. Add type to `src/frontend/src/types/index.ts`
622. Create component in `src/frontend/src/components/nodes/`
633. Export from `src/frontend/src/components/nodes/index.ts`
644. Add defaults in `src/frontend/src/store/app-store.ts`
655. Register in canvas `nodeTypes`
666. Add to AddBlockMenu and ConnectMenu
67