v10 🎉

React Flow v10 comes with many new features and improvements. Besides a complete rewrite of the internal state management, the separation of the graph elements into nodes and edges, several bug fixes and refactorings, these are the most important new features:

• Sub Flows: Support for sub flows, nested flows and grouping of nodes
• Touch Device Support: The UX for connecting nodes on touch devices has been improved
• Key Handling: Multiple keys and key combinations are now supported
• Several new hooks: useReactFlow, useNodes, useEdges, useViewport, useKeypress have been refactored to provide a better dev experience
• Fit View Property: Fit all nodes and edges initially without writing custom logic
• Edge Marker: More options to configure the start and end markers of the edges

If you want to migrate from v9 to v10, you can check out the migration guide.

• chore(bezier-edge): less curvy by default (bfe06a5)
• Improve UE-style Bezier Edge calculation (6f51af2)
• refactor(bezier-edge): only do calculations when necessary (9fff0e5)
• refactor(cypress): cleanup (3b87563)
• chore(deps): update (2d714dc)
• Merge pull request #1968 from wbkd/v10-ue-edge (bf2f9e5)
• refactor(edges): add BaseEdge (bc5d1df)
• refactor(edges): use new edge as default, add simplebezier (b362c11)
• chore(readme): wording (dfc91d7)
• Rename to "unreal" edge, fix for both horizontal and vertical handles (3c96b07)
• Add Unreal Engine style bezier edge (726bc2e)
• chore(attribution): update options (64a3c2d)
• chore(version): bump (466a0af)
• chore(version): bump (1424cf8)
• Merge pull request #1947 from Himself65/v10-fix (5cc3502)
• fix: type error (a48276e)
• refactor(useReactFlow): pass generic nodedata and edgedata closes #1944 (414d7ec)
• Merge branch 'main' into v10 (7fc7dc3)
• refactor(rollup): treeshakable (ebf10fa)
• fix(nocss): use correct entry points (67428d8)
• refactor(builds): drop cjs bundle, add type=module (9156a22)
• chore(version): bump (36fdf20)
• refactor(rollup): define all deps as external (2d9f04c)
• chore(readme): add useUndoable (ca30793)
• chore(readme): add useUndoable (ce2aa46)
• refactor(keys): accept null as key #1463 (fe5337d)
• refactor(nodeTypes/edgeTypes): show warning when not memoized closes #1620 (6630935)
• refactor(handle): only listen to left click events closes #1852 (a45af5f)
• fix(selection-change): only trigger once (67b71a9)
• fix(selection): deselect nodes when select edge and vice versa closes #1899 (007bdab)
• refactor(onmove-handler): pass source event #1676 (a514c0e)
• fix(types): onEdgesDelete (8e41c0d)
• chore(version): bump (c599a45)
• fix: export type OnNodesDelete and OnEdgesDelete (76ff491)
• feat(props): add onNodesDelete and onEdgesDelete handler (e011375)
• chore(version): bump (f7dd26b)
• fix(ts): dont make viewport optional for move callbacks (522780e)
• Delete dependabot.yml (3f2d606)
• fix: enhance type (d250a7d)
• chore(version): bump (6de04df)
• refactor(hooks): export key press hook (3067b72)
• refactor(props): rename paneMoveable to panOnDrag (b3b8ac9)
• update deps (7d9a0ac)
• refactor(useViewport): use shallow for selector (b1791ea)
• chore(version): bump (24593f7)
• refactor(rf): cleanup (4e97472)
• feat(nodes): add group type (8dcb875)
• removed wrong type (4ad17d8)
• refactor(wrapnode): create mouse handler util hook (578c278)
• refactor(wrapnode): pass shallow clones to handlers (588b590)
• refactor(wrapnode): get node from store in event handlers (c40a36f)
• refactor(nodes): re-init when sourcePos, targetPos or type changes (7e915ad)
• chore(version): bump (8d5231b)
• chore(examples): cleanup (1e8d578)
• refactor(changes): handle expand parent on dimension update (ee1a393)
• fix(fitview): only fit view once (1b45a3f)
• refactor(fitView): use same fitView function for viewport helper and initial prop (af52bab)
• chore(version): bump (0244c93)
• refactor(types): add NodePositionChange type (067d681)
• refactor(defaultNode/Edges): always trigger onNodesChange and onEdgesChange (0cfcf65)
• chore(version): bump (2736492)
• fix(exports): add hooks (bfea566)
• feat(hooks): add useViewport (a182458)
• chore(version): bump (2f4d1e6)
• refactor(types): drop NodeInternalsItem type (e52c5ed)
• feat(hooks): add useNodes and useEdges (08b2696)
• chore(nodes): prevent crashing when data is not set on nodes object (f95f390)
• feat(hooks): add useReactFlow hook, refactor types and properties (c2bae79)
• refactor(controls): add titles for buttons (97b5327)
• feat(general): add defaultNodes, defaultEdges and defaultEdgeOptions (634b592)
• refactor(store): cleanup (660ec00)
• chore(version): bump (3f1d186)
• Merge branch 'main' into v10 (f96391f)
• feat(attribution): add react flow attribution (0b241d2)
• chore(version): bump (d285318)
• feat(subflow): add extendParent option (eaeebdd)
• refactor(useKeyPress): check if key code is string (f01e239)
• Merge branch 'main' into v10 (7a7ddbe)
• chore(examples): use new api (a969c63)
• chore(examples): add examples (7a85bb9)
• chore(version): bump (c1e5f90)
• test(examples): use new api for test examples (8014fb0)
• fix(edges): draw connection line when there are no edges closes #1785 (ca77d0e)
• fix(selection): use start x and y when direction changes (6bbd06a)
• chore(rollup): bump (0e3ddc2)
• chore(version): bump (016d35c)
• feat(props): add connectOnClick (d8b054c)
• chore(examples): add overview, cleanup (3206d49)
• feat(nodes): connect on touch device (3b25086)
• refactor(bundle): remove d3-color via rollup alias (639aa1e)
• refactor(examples): use @types/react from lib (efbdd70)
• refactor(deps): remove unused deps (d5cffa7)
• refactor(store): use store.setState directly instead of actions (895e0bc)
• refactor(storeupdater): cleanup (1a2ac5a)
• chore(package.json): bump next version (774db77)
• chore(zoompane): remove unused code (747097f)
• refactor(general): cleanup (81585db)
• refactor(store): remove unused tree generation code (3830878)
• refactor(general): fit view in store to prevent flickering, rename onLoad => onPaneReady (88582a8)
• chore(version): bump (3a52efb)
• feat(rf): add fitViewOnInit option (266007b)
• chore(version): bump (91256c1)
• refactor(hooks): rename useNodeDimensions to useNodeBounds (427c933)
• refactor(onLoad): add new zoom pan helpers (d9c99a8)
• refactor(nodeInternals): widht and height types optional (c2644f1)
• refactor(useZoomPanHelper): add getTransform, getZoom, rename transform to getTransform closes #1746 (b5bba7d)
• feat(hooks): add useNodeDimensions (731918d)
• chore(version): bump (79a32ae)
• refactor(types): add useZoomPanHelperFunc types (5fbf3d8)
• refactor(node): mutate select value before user changes (8710130)
• chore(version): bump (2d4d31b)
• refactor(wrapNode): simplify mouse handler (14b9ec4)
• fix(child-nodes): dragging when parent is selected (2cd047b)
• fix(subflows): handle selections correctly (801d8f2)
• refactor(selection): only fire selection changes that changed (330eefe)
• refactor(actions): addSelectedElements => addSelectedNodes, addSelectedEdges (d260abe)
• feat(hooks): add useNodesState and useEdgesState (a032306)
• refactor(examples): on connect use connection type (713e7e1)
• fix(edges): updatable edge (62f1e90)
• refactor(edge-renderer): cleanup (3325563)
• refactor(edge): pass onEdgeUpdate instead of creating onConnect function (b2ac219)
• refactor(edges): cleanup edge renderer (22f7dd6)
• fix(zIndex): allow zIndex to be set to 0 explicitly (cffefe7)
• chore(markers): cleanup marker api (0f48044)
• chore(version): bump (3011efd)
• refactor(node): disconnect resize observer on unmount (5124b6b)
• chore(version): bump (ea76e55)
• refactor(store): reset on unmount (2962897)
• chore(version): bump (f775cf2)
• refactor(nodes): only observe node when not hidden (8a095df)
• chore(types): enforce defaultProps inside react flow component (9d159c1)
• refactor(subgraphs): calculate z for child nodes (7ffad77)
• feat(selection): disable pane movement when selection is dragged (004dcc6)
• feat(flow): add properties for configuring no-interaction classes (e1f864f)
• refactor(nodes-edges): rename isHidden to hidden (fe9c1f0)
• refactor(nodes): only use node internals (0974aa5)
• feat(stacking): disable auto layering, instead configure via zIndex prop (c29deca)
• refactor(nodes-z): groups start with z=2 (f0e79c6)
• refactor(types): cleanup (8a2ac1e)
• refactor(boolean-props): omit is prefix (a79e953)
• refactor(z-level): implement new stacking logic (050bb31)
• refactor(nodes): stacking order (df25cb3)
• chore(example): add debug node (b0bfefe)
• chore(release): bump next version (9057d3a)
• fix(nested): add nested nodes example, always show nodes on top while dragging or selected (1425a43)
• feat(nodes): add extent option (fdf2571)
• chore(package): bump version (fefcc44)
• refactor(store): rename nodeLookup to nodeInternals (996b1b5)
• refactor(utils): cleanup (cc7debf)
• refactor(graphView): add useOnLoadHandler (b4b1561)
• refactor(connectionline): use abs pos (50250e5)
• refactor(stlyes): use react-flow__container helper (72f1d8b)
• refactor(nodelookup): use ref for node renderer (31ad12e)
• fix(minimap): use abs pos (a3a9249)
• chore(package): bump version (1db53e8)
• Merge branch 'refactor/nested-relative' of github.com:wbkd/react-flow into refactor/nested-relative (8e97232)
• refactor(nodelookup): use as normale store item (5547b0d)
• bump next version (2bcb099)
• feat(stacking): simplify zIndex and treeLevel behaviour (1b390e1)
• wip: multiple edge renderers (79e46d9)
• refactor(nodelookup): add treelevel (7333873)
• refactor(nodes): use relative positions for children (248b563)
• refactor(wrapNode): call update dim when node is not initialized (8cd969d)
• chore(examples): add layouting with new api (65991de)
• refactor(wrapNode): call updateNodeDim when target or source pos changes (6e3ff4e)
• refactor(node): pass width and height dep to style memo (74e8605)
• chore(package.json): release 10.0.0-next.6 (3f992db)
• feat(nested-nodes): simplify nested node rendering (241f604)
• Merge branch 'nested-nodes-flat' of github.com:wbkd/react-flow into nested-nodes-flat (3e0b673)
• feat(noderenderer): convert from flat to nested format internally (5f9bc2e)
• refactor(node-renderer): do not mutate node styles (e8d2600)
• fix(hooks/keypress): check if document is defined (c42ba1f)
• feat(nested-nodes): callback for parent node size change (dc36ebf)
• feat(noderenderer): render nodes recursively (8b95cd7)
• feat(nested-nodes): recursively get children of moved node (c1d5c35)
• feat(nested-nodes): change data structure to flat array of nodes (2252ea1)
• refactor(edgerenderer): cleanup edge utils (64239fb)
• fix(nested-nodes): fix getSourceTargetNode for childNodes (b15d301)
• chore(graph-utils): rename elements to edges (b008c7b)
• Merge branch 'nested-nodes' of github.com:wbkd/react-flow into nested-nodes (8d840b5)
• feat(nodes): add helper functions to iterate over child nodes (9ad894d)
• refactor(hooks): add useVisibleNodes and useVisibleEdges (8f23321)
• refactor(nested-nodes): zIndex (450cb90)
• fix(perf): improve flattenNodes (9350884)
• feat(noderenderer): render child nodes (767fbd4)
• Merge branch 'v10' into refactor/nodes-edges-state (a0b8aa6)
• chore(examples): add old api examples (f957462)
• Merge pull request #1587 from wbkd/feat-markers (11ff5ec)
• refactor(elements): render only visible elements (1525af3)
• refactor(state): separate nodes and edges (410b129)
• feat(markers): bump next version (dc5172e)
• feat(markers): add option to control orientation of markers (b08809d)
• feat(markers): add more properties for custom markers (1b73c8f)
• feat(markers): implement more generic api for markerEnd and markerStart handling (d3b1148)
• Merge branch 'main' into v10 (eed5717)
• refactor(store): cleanup (3dc7927)
• refactor(zustand): use shallow when needed (1f41cc0)
• refactor(graphview): use one hook (3f8c252)
• refactor(state): replace redux with zustand (ee0d290)
• refactor(examples): hide old api examples (e01249a)
• refactor(elements): split into nodes and edges (32ee964)
• Refactor: add possibility to use different keys or combinations as a key code (#1554) (be3b451)