Skip to main content
Back to registry

react-flow

existential-birds/beagle

React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations.

Installs338
Install command
npx skills add https://github.com/existential-birds/beagle --skill react-flow
Security audits
Gen Agent Trust HubPASS
SocketPASS
SnykPASS
About this skill
React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations. Nodes are the building blocks of the graph. Each node has: Built-in node types: Edges connect nodes. Each edge requires: Built-in edge types: Handles are connection points on nodes. Use Position enum for placement: Available positions: Position.Top , Position.Right , Position.Bottom , Position.Left Use state hooks for full control: Access the React Flow instance for programmatic control: Define custom nodes using NodeProps with typed data: Register with nodeTypes : See Custom Nodes Reference for detailed patterns including styling, aviation map pins, and dynamic handles. Define custom edges using EdgeProps and path utilities: All return [path, labelX, labelY, offsetX, offsetY] . Use EdgeLabelRenderer for HTML-based labels with pointer events: See Custom Edges Reference for animated edges, time labels, and SVG text patterns.

Source description provided by the upstream skill listing. Community reviews and install context appear in the sections below.

Community Reviews

Latest reviews

Sign in to review

No community reviews yet. Be the first to review.

Browse this skill in context
FAQ
What does react-flow do?

React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations.

Is react-flow good?

react-flow does not have approved reviews yet, so SkillJury cannot publish a community verdict.

What agent does react-flow work with?

react-flow currently lists compatibility with codex, gemini-cli, opencode, cursor, github-copilot, claude-code.

What are alternatives to react-flow?

Skills in the same category include telegram-bot-builder, flutter-app-size, sharp-edges, iterative-retrieval.

How do I install react-flow?

npx skills add https://github.com/existential-birds/beagle --skill react-flow

Related skills

More from existential-birds/beagle

Related skills

Alternatives in Software Engineering