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

1. Add type to

   src/frontend/src/types/index.ts

2. Create component in

   src/frontend/src/components/nodes/

3. Export from

   src/frontend/src/components/nodes/index.ts

4. Add defaults in

   src/frontend/src/store/app-store.ts

5. Register in canvas

   nodeTypes

6. Add to AddBlockMenu and ConnectMenu

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.