Create interactive node-based graphs and workflow editors in React.
npx skills add https://github.com/jrmatherly/shipit --skill react-flow-jrmatherly
Please help me install this Agent Skill. Skill: react-flow Source: https://github.com/jrmatherly/shipit/tree/main/.claude/skills/react-flow Command: npx skills add https://github.com/jrmatherly/shipit --skill react-flow-jrmatherly
This Skill simplifies building and customizing interactive node-based graphs and workflow editors in React, removing friction around wiring nodes, styling edges, handling events, and programmatic viewport control.
Open a React project, install @xyflow/react, and add a React Flow canvas with initial nodes and edges to visualize and interact with your workflow.
High-intent search queries and answers about installing and using this skill.
Interactive node-based graphs in React are built using draggable nodes, connectable edges, and custom components. You define initial nodes and edges on a canvas to visualize and interact with workflows, allowing users to visually compose processes and trigger actions.
Custom nodes and edges for a React workflow editor are created using typed NodeProps and EdgeProps. This approach renders domain-specific UI, supporting HTML edge labels, animated edges, and SVG text along paths for rich visual interactions.
Viewport control and event handling in a React flow canvas are managed through hooks like useReactFlow. You can programmatically fit view, zoom, center, convert coordinates, and respond to node, edge, or selection events to build rich UX and automation.
Visualizing and editing workflows in a web-based dashboard is best achieved with an interactive graph editor. Users visually compose processes, inspect node data, and trigger actions from edge interactions, supported by typed APIs for programmatic control.
Yes, you need to install the @xyflow/react package in your React project to use React Flow hooks. This provides the necessary APIs and utilities, such as useNodesState, useEdgesState, and fitView, to implement programmatic graph control.
javierhbrImplement node-based React interfaces with @xyflow/react for flowcharts and diagrams.
synqingDefine a production-grade API specification for the PRISM Node K1 Light Lab editor.
anderskevImplement React Flow node-based UIs with @xyflow/react.
linehaul-aiBuild node-based editors and interactive flow visualizations with Svelte Flow.
