A React component library for building interactive directed graph editors with SVG rendering and event handling.
React-digraph is a React library for building interactive directed graph editors. It provides a ready-to-use React component that handles SVG rendering, user interactions (like creating nodes/edges, dragging, zooming), and layout, allowing developers to quickly implement visual graph editing interfaces without dealing with low-level drawing logic.
Frontend developers building applications that require visual graph editing, such as workflow automation tools, data pipeline designers, network topology mappers, or any interface where users need to create and manipulate node-and-edge diagrams.
Developers choose react-digraph because it offers a production-ready, feature-rich graph editor component out of the box, significantly reducing development time compared to building from scratch. Its flexibility through extensive configuration and callbacks allows deep customization while it manages the complex interactive SVG rendering.
A library for creating directed graph editors
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows defining custom node and edge types through configuration objects (nodeTypes, edgeTypes), enabling full control over visual representation with custom SVG symbols.
Handles all basic graph operations like creating, deleting, moving nodes/edges with keyboard shortcuts and mouse interactions, reducing the need for low-level SVG event handling.
Introduced in v8.0.0, enables selecting multiple nodes and edges using Ctrl/Cmd-Shift drag, facilitating batch operations for efficient graph editing.
Includes built-in layouts like 'SnapToGrid' and supports external engines like dagre for automatic graph arrangement, simplifying complex visual layouts.
Provides hooks for every graph operation (e.g., onCreateNode, onUpdateNode), allowing developers to integrate custom business logic while react-digraph manages the rendering.
Version 8.0.0 introduced significant breaking changes, such as replacing onSelectNode/Edge with a single onSelect callback, which can complicate upgrades and require code refactoring.
Leaves all application state, undo/redo, and copy-paste logic to the developer, as stated in the philosophy, increasing implementation overhead compared to more integrated solutions.
Requires defining nodeTypes, edgeTypes, and handling numerous callbacks, which can be daunting for quick prototyping or developers unfamiliar with SVG and graph concepts.