Browse our examples for practical copy-paste solutions to common use cases with React Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our React Flow Pro subscription plans.
EDGES
Change the appearance and behavior of the connection line
EDGES
Draw multiple connection lines at once from any selected nodes.
INTERACTION
React Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.
SUBFLOWS & GROUPING
Dynamically attach and detach nodes from parent containers with drag and drop functionality
For a more powerful alternative to dagre, you can also use elkjs to layout your graphs
React Flow comes with a color mode prop that allows you to switch between dark, light and system mode.
WHITEBOARD
An example about selecting multiple items using a lasso selection tool.
MISC
Generate static images of React Flow graphs on the server with Puppeteer
