Selection Grouping

This example demonstrates how to create dynamic node grouping in React Flow. You can select multiple nodes by holding Shift and clicking, then use the “Group Nodes” button in the appearing toolbar to group them together. When a group node is selected, an “Ungroup” button appears that detaches all child nodes. Group nodes automatically adjust their dimensions based on their child nodes.

This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.

Subscribe Sign In

About this Pro Example

Dependencies: @xyflow/react
License: xyflow Pro License