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 node-based UI components.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- React Flow Node
- Quick Start
- Templates
- Node Component Pattern
- Type Definition Pattern
- Integration Steps
Create React Flow node components following established patterns with proper TypeScript types and store integration. 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) assets/template.tsx - Node component assets/types.template.ts - TypeScript definitions 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
- Source repository
- microsoft/skills
- Source file
- .github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
- Fixed revision
- 9287b443662d2433c85621c7325ee72a0ce499b5
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Microsoft Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T19:02:06.631Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.