# React Flow Node TS

> 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 no...

- Skill: `involvex/react-flow-node-ts-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add involvex/react-flow-node-ts-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/involvex/react-flow-node-ts-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: involvex (https://skillmd.com/u/involvex)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/involvex/react-flow-node-ts-2

---


# 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

```tsx
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

```typescript
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.