Skip to main content

Auto Layout

This example shows how you can automatically arrange nodes after adding items from a sidebar. This a common UI pattern for workflow editors and lets you create a flow quickly. The layout is calculated every time a node is added with the help of the d3-hierarchy library. If you are subscribed to React Flow Pro, you will get access to two versions of this example: One using d3-hierarchy and the other one using dagre.js as a layout engine.

Dependencies: reactflow, d3-hierarchy or dagre

This is a Pro example. If you are subscribed to React Flow Pro you can access the annotated source code.