Build faster with
React Flow
components
Build faster with
React Flow
components
Build faster with
React Flow
components
Ready-to-use, production-grade features.
Built by Synergy Codes, official React Flow partner.
Ready-to-use, production-grade features.
Built by Synergy Codes, official React Flow partner.
Companies that are using our components.
Stop reinventing the wheel.
Start building faster.
Save development hours
Each component saves up to 100 hours
of development time. Ship features faster.
Production-ready
Battle-tested components used
in real canvas tools.
Plug-and-play
Drop in and customise easily.
Seamlessly work with React Flow.
Discover our
React Flow components
Layout and arrangement
Components that help with organizing and positioning elements within the diagram.
Connection management
User interface components
Clipboard and export operations
State management and edit controls
Bring to front
This functionality allows users to reposition nodes and edges within a diagram, bringing them to the front or sending them to the back of all diagram elements. This feature also supports nested groups.
Rotate
This functionality enables node rotation using a rotation handle that appears when users select a node. Users can customize the position of the rotation handle, define the rotation step (e.g., rotating every 20 pixels), and specify the axis of rotation.
Grouping
Possibility to dynamically group elements. Auto-resize for groups. Manual resize for groups. Support for multiple levels of nested groups (group within a group)
React Flow + Elk.js
Directed graph layout supporting edge labels and custom-positioned handles, without support for groups yet.
Explore our
React Flow components
Layout and Arrangement
Components that help with organizing and positioning elements within the diagram.
Bring to front
This functionality allows users to reposition nodes and edges within a diagram, bringing them to the front or sending them to the back of all diagram elements. This feature also supports nested groups.
Rotate
This functionality enables node rotation using a rotation handle that appears when users select a node. Users can customize the position of the rotation handle, define the rotation step (e.g., rotating every 20 pixels), and specify the axis of rotation.
Grouping
Possibility to dynamically group elements. Auto-resize for groups. Manual resize for groups. Support for multiple levels of nested groups (group within a group)
React Flow + Elk.js
Directed graph layout supporting edge labels and custom-positioned handles, without support for groups yet.
Connection Management
Components focused on creating and manipulating connections between nodes.
Orthogonal path routing
Custom implementation of orthogonal path routing for edges. It supports snapping to grid, rotation, curved edges, and tries to not overlap with the source or target node.
Side port handles
This functionality provides an implementation of port handles that are positioned away from the node itself. It allows users to place port handles at a distance from the node while ensuring that the links connect directly to the node rather than the distant handle.
Edge reshaping
This functionality allows users to adjust the path of an edge by adding or reducing the number of orthogonal segments, making it easier to manage and manipulate connections. It works with nodes in different groups and also with rotated nodes.
Direct shape connection
This functionality ensures that links connect directly to the contours of objects instead of creating a rectangular bounding box around them, even if the shape is irregular, like a triangle.
User Interface Components
Components that enhance the user interface for better interaction with the diagram.
Customizable nodes
This functionality allows users to create a custom object by adding new, pre-defined elements to a blank node and changing the order of elements within an object.
Drop-down editor
This functionality enables users to customize drop-down menus in nodes by editing text and adding new or removing existing menu items. Each menu item automatically generates a handle, allowing users to create edges to other diagram objects easily.
Expanded shape library
The shape library offers users a broad selection of default shapes to create more diverse and complex diagrams.
Freehand drawing
This functionality enables drawing custom paths on canvas and utilizing Bezier curves instead of straight lines to smooth the final path. When completed, the drawing becomes a node.
Radio button editor
This functionality enables users to customize radio button groups in nodes by editing text and adding new or removing existing buttons. Each radio button automatically generates a handle, allowing users to create edges to other diagram objects easily.
Clipboard and Export Operations
Components that facilitate copying, transferring, and exporting diagram content.
Copy & paste
This functionality allows users to copy, cut, and paste actions. It supports all major browsers, keyboard shortcuts, and a context menu for intuitive user interaction. Additionally, when copying two nodes connected by an edge, users can optionally copy the edge along with the nodes.
Download diagram as image
This functionality allows users to export diagrams—a whole model, or just a specific selection—as image files effortlessly, making it easy to share or embed them in presentations and documents.
External copy & paste
This functionality extends the standard copy-and-paste feature to work across different browsers by copying diagram content to the system clipboard. It ensures compatibility with all major browsers, allowing users to transfer diagram elements effortlessly between browser sessions.
State Management and Edit Controls
Components that handle application state and provide edit functionality.
Drag & drop for React
This functionality enables users to drag standard React components onto a diagram, where they are visually transformed into React Flow components. It's ideal for palettes with React components representing diagram nodes with unique types. Upon dropping, the system identifies the component type and creates the corresponding pre-implemented React Flow node.
Undo/redo manager
This functionality allows users to reverse or reinstate their actions quickly, giving them more control during editing. Users can undo and redo as many actions as they want.
Zustand store
This functionality is a Zustand store implementation for a React Flow diagram. It stores diagram elements in maps instead of arrays to optimize performance.
Explore our
React Flow components
Layout and Arrangement
Components that help with organizing and positioning elements within the diagram.
Bring to front
This functionality allows users to reposition nodes and edges within a diagram, bringing them to the front or sending them to the back of all diagram elements. This feature also supports nested groups.
Rotate
This functionality enables node rotation using a rotation handle that appears when users select a node. Users can customize the position of the rotation handle, define the rotation step (e.g., rotating every 20 pixels), and specify the axis of rotation.
Grouping
Possibility to dynamically group elements. Auto-resize for groups. Manual resize for groups. Support for multiple levels of nested groups (group within a group)
React Flow + Elk.js
Directed graph layout supporting edge labels and custom-positioned handles, without support for groups yet.
Connection Management
Components focused on creating and manipulating connections between nodes.
Orthogonal path routing
Custom implementation of orthogonal path routing for edges. It supports snapping to grid, rotation, curved edges, and tries to not overlap with the source or target node.
Side port handles
This functionality provides an implementation of port handles that are positioned away from the node itself. It allows users to place port handles at a distance from the node while ensuring that the links connect directly to the node rather than the distant handle.
Edge reshaping
This functionality allows users to adjust the path of an edge by adding or reducing the number of orthogonal segments, making it easier to manage and manipulate connections. It works with nodes in different groups and also with rotated nodes.
Direct shape connection
This functionality ensures that links connect directly to the contours of objects instead of creating a rectangular bounding box around them, even if the shape is irregular, like a triangle.
User Interface Components
Components that enhance the user interface for better interaction with the diagram.
Customizable nodes
This functionality allows users to create a custom object by adding new, pre-defined elements to a blank node and changing the order of elements within an object.
Drop-down editor
This functionality enables users to customize drop-down menus in nodes by editing text and adding new or removing existing menu items. Each menu item automatically generates a handle, allowing users to create edges to other diagram objects easily.
Expanded shape library
The shape library offers users a broad selection of default shapes to create more diverse and complex diagrams.
Freehand drawing
This functionality enables drawing custom paths on canvas and utilizing Bezier curves instead of straight lines to smooth the final path. When completed, the drawing becomes a node.
Radio button editor
This functionality enables users to customize radio button groups in nodes by editing text and adding new or removing existing buttons. Each radio button automatically generates a handle, allowing users to create edges to other diagram objects easily.
Clipboard and Export Operations
Components that facilitate copying, transferring, and exporting diagram content.
Copy & paste
This functionality allows users to copy, cut, and paste actions. It supports all major browsers, keyboard shortcuts, and a context menu for intuitive user interaction. Additionally, when copying two nodes connected by an edge, users can optionally copy the edge along with the nodes.
Download diagram as image
This functionality allows users to export diagrams—a whole model, or just a specific selection—as image files effortlessly, making it easy to share or embed them in presentations and documents.
External copy & paste
This functionality extends the standard copy-and-paste feature to work across different browsers by copying diagram content to the system clipboard. It ensures compatibility with all major browsers, allowing users to transfer diagram elements effortlessly between browser sessions.
State Management and Edit Controls
Components that handle application state and provide edit functionality.
Drag & drop for React
This functionality enables users to drag standard React components onto a diagram, where they are visually transformed into React Flow components. It's ideal for palettes with React components representing diagram nodes with unique types. Upon dropping, the system identifies the component type and creates the corresponding pre-implemented React Flow node.
Undo/redo manager
This functionality allows users to reverse or reinstate their actions quickly, giving them more control during editing. Users can undo and redo as many actions as they want.
Zustand store
This functionality is a Zustand store implementation for a React Flow diagram. It stores diagram elements in maps instead of arrays to optimize performance.
Explore our
React Flow components
Layout and Arrangement
Components that help with organizing and positioning elements within the diagram.
Bring to front
This functionality allows users to reposition nodes and edges within a diagram, bringing them to the front or sending them to the back of all diagram elements. This feature also supports nested groups.
Rotate
This functionality enables node rotation using a rotation handle that appears when users select a node. Users can customize the position of the rotation handle, define the rotation step (e.g., rotating every 20 pixels), and specify the axis of rotation.
Grouping
Possibility to dynamically group elements. Auto-resize for groups. Manual resize for groups. Support for multiple levels of nested groups (group within a group)
React Flow + Elk.js
Directed graph layout supporting edge labels and custom-positioned handles, without support for groups yet.
Connection Management
Components focused on creating and manipulating connections between nodes.
Orthogonal path routing
Custom implementation of orthogonal path routing for edges. It supports snapping to grid, rotation, curved edges, and tries to not overlap with the source or target node.
Side port handles
This functionality provides an implementation of port handles that are positioned away from the node itself. It allows users to place port handles at a distance from the node while ensuring that the links connect directly to the node rather than the distant handle.
Edge reshaping
This functionality allows users to adjust the path of an edge by adding or reducing the number of orthogonal segments, making it easier to manage and manipulate connections. It works with nodes in different groups and also with rotated nodes.
Direct shape connection
This functionality ensures that links connect directly to the contours of objects instead of creating a rectangular bounding box around them, even if the shape is irregular, like a triangle.
User Interface Components
Components that enhance the user interface for better interaction with the diagram.
Customizable nodes
This functionality allows users to create a custom object by adding new, pre-defined elements to a blank node and changing the order of elements within an object.
Drop-down editor
This functionality enables users to customize drop-down menus in nodes by editing text and adding new or removing existing menu items. Each menu item automatically generates a handle, allowing users to create edges to other diagram objects easily.
Expanded shape library
The shape library offers users a broad selection of default shapes to create more diverse and complex diagrams.
Freehand drawing
This functionality enables drawing custom paths on canvas and utilizing Bezier curves instead of straight lines to smooth the final path. When completed, the drawing becomes a node.
Radio button editor
This functionality enables users to customize radio button groups in nodes by editing text and adding new or removing existing buttons. Each radio button automatically generates a handle, allowing users to create edges to other diagram objects easily.
Clipboard and Export Operations
Components that facilitate copying, transferring, and exporting diagram content.
Copy & paste
This functionality allows users to copy, cut, and paste actions. It supports all major browsers, keyboard shortcuts, and a context menu for intuitive user interaction. Additionally, when copying two nodes connected by an edge, users can optionally copy the edge along with the nodes.
Download diagram as image
This functionality allows users to export diagrams—a whole model, or just a specific selection—as image files effortlessly, making it easy to share or embed them in presentations and documents.
External copy & paste
This functionality extends the standard copy-and-paste feature to work across different browsers by copying diagram content to the system clipboard. It ensures compatibility with all major browsers, allowing users to transfer diagram elements effortlessly between browser sessions.
State Management and Edit Controls
Components that handle application state and provide edit functionality.
Drag & drop for React
This functionality enables users to drag standard React components onto a diagram, where they are visually transformed into React Flow components. It's ideal for palettes with React components representing diagram nodes with unique types. Upon dropping, the system identifies the component type and creates the corresponding pre-implemented React Flow node.
Undo/redo manager
This functionality allows users to reverse or reinstate their actions quickly, giving them more control during editing. Users can undo and redo as many actions as they want.
Zustand store
This functionality is a Zustand store implementation for a React Flow diagram. It stores diagram elements in maps instead of arrays to optimize performance.
Łukasz Jaźwa
CTO at Synergy Codes
“We’ve built RF components with production-grade quality in mind. They’re already powering a wide range of solutions - from AI orchestration tools and workflow builders to digital twins in the automotive industry.”
Łukasz Jaźwa
CTO at Synergy Codes
FAQ
How much development time can we save by using these components versus building custom solutions?
With out-of-the-box features like undo/redo management, drag & drop React components, customizable nodes, orthogonal routing, grouping, and diagram export, React Flow components can shave off weeks of development. Instead of building core logic from scratch, teams can focus on unique business logic and visual styling.
How much development time can we save by using these components versus building custom solutions?
With out-of-the-box features like undo/redo management, drag & drop React components, customizable nodes, orthogonal routing, grouping, and diagram export, React Flow components can shave off weeks of development. Instead of building core logic from scratch, teams can focus on unique business logic and visual styling.
How much development time can we save by using these components versus building custom solutions?
With out-of-the-box features like undo/redo management, drag & drop React components, customizable nodes, orthogonal routing, grouping, and diagram export, React Flow components can shave off weeks of development. Instead of building core logic from scratch, teams can focus on unique business logic and visual styling.
What's the performance impact when using these components with large diagrams?
What's the performance impact when using these components with large diagrams?
What's the performance impact when using these components with large diagrams?
Are there any licensing costs or restrictions for commercial projects?
Are there any licensing costs or restrictions for commercial projects?
Are there any licensing costs or restrictions for commercial projects?
How easy is it to customize the appearance of these components to match our product's design system?
How easy is it to customize the appearance of these components to match our product's design system?
How easy is it to customize the appearance of these components to match our product's design system?
Is real-time collaboration supported?
Is real-time collaboration supported?
Is real-time collaboration supported?
See it in action.
Discover how we can save you hours of development time.