skills.rest
constructive-io
constructive-ioOFFICIAL
Explore all skills by this author →
Website𝕏@constructive_ioGitHub

fbp-graph-editor

Render and edit FBP graphs with an SVG canvas and Bezier edges.

1|Updated Jan 20, 2026
Search Tags:#react#ui component#visual programming#flow-based programming#fbp#graph editor
One-click install
npx skills add https://github.com/constructive-io/constructive-skills --skill fbp-graph-editor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fbp-graph-editor
Source: https://github.com/constructive-io/constructive-skills/tree/main/skills/fbp-graph-editor
Command: npx skills add https://github.com/constructive-io/constructive-skills --skill fbp-graph-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use, interactive graph editor component for building visual interfaces for Flow-Based Programming (FBP) systems, simplifying the development of complex data flow applications.

Core Features & Use Cases

  • Interactive Graph Canvas: Features an SVG-based canvas with pan/zoom capabilities for intuitive navigation.
  • Node and Edge Rendering: Displays nodes with fully-qualified type paths and connects them using smooth Bezier curves.
  • Properties Panel: Automatically generates a panel for editing node properties based on definitions.
  • Use Case: Integrate this Skill into your application to allow users to visually design and modify data processing pipelines, network configurations, or automation workflows.

Quick Start

Add the fbp-graph-editor package to your project using pnpm add @fbp/graph-editor.

Frequently Asked Questions about fbp-graph-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a visual React interface for flow-based programming?▼

To build a visual React interface for flow-based programming, you can integrate an SVG-based graph editor component that provides an interactive canvas for designing and editing FBP graphs. This simplifies developing complex data flow applications.

What is the best way to render FBP graphs with Bezier edges in a React UI component?▼

The best way to render FBP graphs with Bezier edges in a React UI component is using a dedicated graph editor that connects nodes with smooth Bezier curves and displays fully-qualified type paths for clear visual data flow mapping.

Can I visually edit node properties in a flow-based programming graph?▼

Yes, you can visually edit node properties in a flow-based programming graph. The editor automatically generates a properties panel based on node definitions, allowing users to modify configurations directly within the visual interface.

Does this flow-based programming graph editor support pan and zoom on an SVG canvas?▼

Yes, this flow-based programming graph editor supports pan and zoom on an SVG canvas. It features an interactive SVG-based canvas with pan and zoom capabilities to provide intuitive navigation across complex data processing pipelines.

How do I add the fbp-graph-editor package to my project?▼

To add the fbp-graph-editor package to your project, run the command `pnpm add @fbp/graph-editor` in your terminal. This installs the required React component for building visual FBP interfaces.

Related Skills

Explore More Software Engineering Skills→
constructive-ioconstructive-io

fbp-evaluator

Evaluate Flow-Based Programming graphs with lazy node execution.

Official
Intermediate
ArabelaTsoArabelaTso
142

python-to-lean4-translator

Translates Python programs into executable, well-typed Lean4 code.

Community
Advanced
curiositechcuriositech
181

reactflow-expert

Construct DAG visualizations with ReactFlow v12, ELKjs layout, and Zustand state.

Official
Advanced
constructive-ioconstructive-io

fbp-spec

Manage flow-based programming graph structures with a path-based identity system.

Official
Intermediate