npm · #4031

@xyflow/react

12.11.5xyflow/xyflow ↗

React Flow - A highly customizable React library for building node-based editors and interactive flow charts.

Last release 2 days ago
25 Aug 2026
Release timing varies
gaps range from 8 days to 3 months
Nearly every release is documented
notes for 54 of 55 stable releases
Nothing withdrawn
no release was ever pulled
3 years old
84 releases · first in 2024

Release timeline

84 releases since 2024

202420252026

Releases

12.11.525 Aug 2026
Release notes
Patch Changes
- Updated dependencies [22e0be2]:
  - @xyflow/[email protected]
Open source →
12.11.425 Aug 2026
Release notes
Patch Changes
- #5974 8c42922 - Minimap still works after ReactFlow remounts
- #5962 cbf40b9 - Show log if user hides attribution in development
- #5976 3319ef4 - Fix the MiniMap zooming out to include the origin when every node is hidden.
- #5955 965ca70 - Fix MiniMap calling useCallback conditionally for onNodeClick.
Open source →
12.11.312 Aug 2026
Release notes
Patch Changes
- #5902 393d951 - Allow middle-mouse viewport panning to start from a selection rectangle.
- #5889 ff126a0 - Fix extent: 'parent' not immediately resolving when parent has width or initialWidth.
- #5943 d1def59 - Invoke an error if handle can not be found
- #5947 2ba040f - Use correct nodeExtent for internal setNodes.
- #5918 c5d7442 - Fix selection box appearing when dragging the pane via touch. Prefer touch panning over drag selection when selectionOnDrag is combined with mouse-button-specific panOnDrag settings.
- #5922 392da00 - Allow Control to activate pane panning with a primary-button drag.
- #5929 4c5d7d2 - Allow key combinations of three or more keys (e.g. 'Meta+Shift+s') for useKeyPress.
- #5938 91a052f - Fix <Background /> pattern offset miscalculation.
- Updated dependencies [393d951, ff126a0, e5d86bd, 392da00]:
  - @xyflow/[email protected]
Open source →
12.11.26 Jul 2026
Release notes
Patch Changes
- #5825 5072914 - Only create an XYDrag instance for draggable nodes.
- #5847 742860c - Stop the MiniMap from re-rendering on every store update.
- #5846 17c64a1 - Apply the viewport pan/zoom transform imperatively so the Viewport component only renders once.
- Updated dependencies [c707267, 0c0cebc, 56cf3b0, a01bb6b, 9b3f390, cdfcbeb]:
  - @xyflow/[email protected]
Open source →
12.11.122 Jun 2026
Release notes
Patch Changes
- #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.
- #5823 a6afc91 - Update attribution link
- #5824 6b1dac5 - Do not fire on pane click when connection ends on pane
- #5818 4ddc2d8 - Provide the shared handle config (connectOnClick, noPanClassName, rfId) through context instead of subscribing to the store in every Handle, so a store update no longer runs a selector once per handle
- #5817 8df250b - Reduce per-handle work on store updates by returning a shared connection state while no connection is in progress.
- #5822 a6249de - Return stable reference for edge position when connected node gets deleted
- Updated dependencies [ceb8604, 87da45c]:
  - @xyflow/[email protected]
Open source →
12.11.01 Jun 2026
Release notes
12.11.0

Minor Changes
- #5677 e6661de - Add autoPanOnSelection to auto-pan when user drags a selection close to the edge of the viewport.
Patch Changes
- #5791 732c8eb - Adds a type error when handleId is used without handleType in useNodeConnections
- #5793 c5c853d - Dev Warnings now use library-specific messaging with the correct documentation links.
- #5776 0441e9f - Export NodeHandle type
- #5755 88737f9 - Add @types/react and @types/react-dom as optional peer dependencies to prevent issues with pnpm strict mode (hoist: false)
- #5105 076ad38 - Fix type for event passed to onNodeDrag
- #5784 7055140 - Fix node resizing possible beyond absolute extents
- #5769 ad4d547 - Use useEffect for StoreUpdater to restore previous behaviour
- Updated dependencies [732c8eb, c5c853d, e6661de, 737194d, 40660cd, 4806e7c, 7055140]:
  - @xyflow/[email protected]
Open source →
12.10.227 Mar 2026
Release notes
Patch Changes
- #5735 a6c938fb2 Thanks @nvie! - Allow type field to be missing in BuiltInNode (no type field is the same as type: "default")
- #5722 8c9b7e726 Thanks @dfblhmm! - Add snapGrid to screenToFlowPosition options
- #5723 82249517a Thanks @moklick! - Pass options to useReactFlow/useSvelteFlow viewport helper functions correctly
- #5733 64115cd08 Thanks @AlaricBaraou! - Fix empty store during ReactFlow remount by reordering StoreUpdater before GraphView and using layout effects
- #5727 dd54e86b9 Thanks @solastley! - Ensure visual nodes selection state is cleared when zero selected nodes remain in the flow
- Updated dependencies [4a278dbbf]:
  - @xyflow/[email protected]
Open source →
12.10.119 Feb 2026
Release notes
Patch Changes
- #5704 c91d3d022 Thanks @peterkogo! - Keep onConnectEnd and isValidConnection up to date in an ongoing connection
- #5687 2624479ad Thanks @vkrol! - Optimize zooming performance when panOnScroll mode is enabled
- #5682 7b6e46ce1 Thanks @artemtam! - Prevent unnecessary updates when selectNodesOnDrag = false
- #5703 ce6c869df Thanks @peterkogo! - Improve return type of useNodesData. Now you can narrow down the data type by checking the node type.
- #5692 49646858f Thanks @moklick! - Handle undefined node in mini map
- #5684 382c654c3 Thanks @ysds! - Consolidate drag handler effects in useDrag to fix programmatic selection issues
- Updated dependencies [ce6c869df]:
  - @xyflow/[email protected]
Open source →
12.10.04 Dec 2025
Release notes
Minor Changes
- #5637 0c7261a6d Thanks @moklick! - Add zIndexMode to control how z-index is calculated for nodes and edges
- #5484 a523919d6 Thanks @peterkogo! - Add experimental_useOnNodesChangeMiddleware hook
Patch Changes
- #5629 9030fab2d Thanks @AlaricBaraou! - Prevent unnecessary re-render in FlowRenderer
- #5592 38dbf41c4 Thanks @svilen-ivanov-kubit! - Always create a new measured object in apply changes.
- #5635 2d7fa40e2 Thanks @tornado-softwares! - Update an ongoing connection when user moves node with keyboard.
- Updated dependencies [0c7261a6d, 8598b6bc2, 2d7fa40e2]:
  - @xyflow/[email protected]
Open source →
12.9.313 Nov 2025
Release notes
Patch Changes
- #5621 c1304dba7 Thanks @moklick! - Set paneClickDistance default value to 1.
- #5578 00bcb9f5f Thanks @peterkogo! - Pass current pointer position to connection
- Updated dependencies [00bcb9f5f]:
  - @xyflow/[email protected]
Open source →
12.9.230 Oct 2025
Release notes
Patch Changes
- #5593 a8ee089d7 Thanks @moklick! - Reset selection box when user selects a node
Open source →
12.9.128 Oct 2025
Release notes
Patch Changes
- #5572 5ec0cac7f Thanks @peterkogo! - Fix onPaneClick events being suppressed when selectionOnDrag=true
- Updated dependencies [5ec0cac7f]:
  - @xyflow/[email protected]
Open source →
12.9.020 Oct 2025
Release notes
Minor Changes
- #5544 c17b49f4c Thanks @0x0f0f0f! - Add EdgeToolbar component
- #5550 6ffb9f790 Thanks @peterkogo! - Prevent child nodes of different parents from overlapping
- #5551 6bb64b3ed Thanks @moklick! - Allow to start a selection above a node
Patch Changes
- #5531 fe2a45ed2 Thanks @Sec-ant! - Add type property to EdgeProps to match NodeProps behavior
- #5528 d50a963cd Thanks @peterkogo! - Let NodeResizer props change during ongoing resize
- #5530 3b9951e42 Thanks @peterkogo! - Improve performance of adding nodes & edges
- #5547 1c8961207 Thanks @moklick! - Always call onMoveEnd when onMoveStart was called
- Updated dependencies [c17b49f4c, 6ffb9f790, d50a963cd, 6bb64b3ed, 8a9ee2d83, 1c8961207]:
  - @xyflow/[email protected]
Open source →
12.8.626 Sept 2025
Nothing published for this version
12.8.517 Sept 2025
Release notes
Patch Changes
- #5480 f869808e3 Thanks @peterkogo! - Prevent multi-touch events while making a new connection
- #5482 56381ae54 Thanks @peterkogo! - Make isNodeIntersecting behave the same as getIntersectingNodes
- #5509 b6ae4cc11 Thanks @moklick! - Prevent calling onResizeEnd if node was not resized
- #5511 d891e5ff1 Thanks @peterkogo! - Fix regression: elevate edges if connected nodes are selected
- #5497 eba087e8b Thanks @peterkogo! - Skip eagerly rendering nodes when node dimensions and handles are predefined
- #5455 d2df1dced Thanks @Sec-ant! - Fix warning when display is set to none on the wrapper div
- Updated dependencies [f869808e3, 2a35c65a0, b6ae4cc11, d891e5ff1, eba087e8b]:
  - @xyflow/[email protected]
Open source →
12.8.420 Aug 2025
Release notes
Patch Changes
- #5472 372c493a Thanks @moklick! - Remove dangerouslySetInnerHTML from domAttributes
- #5459 2e7c89c6 Thanks @0x0f0f0f! - Fix open arrow marker using fill color from edge instead of none
- Updated dependencies [5ece6b36, 53da1193]:
  - @xyflow/[email protected]
Open source →
12.8.313 Aug 2025
Release notes
Patch Changes
- #5420 c453ee3f Thanks @ShlomoGalle! - Omit defaultValue from Node's domAttributes to fix type incompatibility when using WritableDraft
- #5436 def02b96 Thanks @moklick! - Prevent a 0 added to the markup for edges when interactionWidth is 0
- #5444 9aca4839 Thanks @paula-stacho! - Export MiniMapNode
- #5443 144f8feb Thanks @moklick! - Use 1 as the default for interactive Minimap zoom step
- #5428 f18e9856 Thanks @Karl255! - Fix clicking on detached handle elements not initiating drawing of connections
- #5453 7a088817 Thanks @moklick! - Snap selection instead of separate nodes when snap grid is enabled
- #5415 6838df9d Thanks @moklick! - Allow strings and enums for existing marker types
- #5444 9192fd7d Thanks @paula-stacho! - Export MiniMapNode
- #5448 f5fe1d71 Thanks @moklick! - Use correct HandleConnection type for Handle onConnect
- #5419 daa33fb3 Thanks @0x0f0f0f! - Make arrow heads markers fallback to --xy-edge-stroke CSS variable when passing null as marker color
- Updated dependencies [144f8feb, f18e9856, 7a088817, 6838df9d, fddbb7de, f5fe1d71, daa33fb3]:
  - @xyflow/[email protected]
Open source →
12.8.211 Jul 2025
Release notes
Patch Changes
- #5384 18514e11 Thanks @Sec-ant! - Fix node fallback to respect custom default node type when unknown node type is encountered
- #5394 21db22d4 Thanks @moklick! - Return intersections correctly of passed node is bigger than intersecting nodes
- #5384 ab05d008 Thanks @Sec-ant! - Fix edge fallback to respect custom default edge type when unknown edge type is encountered.
- #5376 f0ce2c87 Thanks @kennyjwilli! - Add stepPosition param to step edge
- Updated dependencies [864d4188, f0ce2c87]:
  - @xyflow/[email protected]
Open source →
12.8.127 Jun 2025
Release notes
Patch Changes
- Updated dependencies [26f2cdd7]:
  - @xyflow/[email protected]
Open source →
12.8.027 Jun 2025
Release notes
Minor Changes
- #5361 90e9247a Thanks @peterkogo! - Render edges above nodes when they are within a subflow
- #5344 2441bf8d Thanks @moklick! - Add connectionDragThreshold prop
Patch Changes
- #5368 445017ed Thanks @moklick! - Cleanup store updater
- #5362 72dc1d60 Thanks @moklick! - Remove pointer events from Panel via CSS while a selection gets dragged
- Updated dependencies [72dc1d60, 90e9247a, 2441bf8d]:
  - @xyflow/[email protected]
Open source →
12.7.123 Jun 2025
Release notes
Patch Changes
- #5354 c4312d89 Thanks @moklick! - Add TSDoc annotations
- #5333 3d7e8b6b Thanks @peterkogo! - Add missing type exports
- #5353 4dd3ae66 Thanks @aidanbarrett! - Add missing FinalConnectionState parameter to onReconnectEnd prop types
- Updated dependencies [c4312d89, 3d7e8b6b, 9c61000c]:
  - @xyflow/[email protected]
Open source →
12.7.011 Jun 2025
Release notes
Minor Changes
- #5299 848b486b Thanks @printerscanner! - Add ariaRole prop to nodes and edges
- #5280 dba6faf2 Thanks @moklick! - Improve typing for Nodes
- #5276 6ce44a05 Thanks @moklick! - Add an ease and interpolate option to all function that alter the viewport
- #5277 f59730ce Thanks @printerscanner! - Add ariaLabelConfig prop for customizing UI text like aria labels and descriptions.
- #5317 09458f52 Thanks @moklick! - Add domAttributes option for nodes and edges
- #5326 050b511c Thanks @peterkogo! - Prevent NodeResizer controls to become too small when zooming out
- #5308 09fab679 Thanks @printerscanner! - Focus nodes on tab if not within the viewport and add a new prop autoPanOnNodeFocus
Patch Changes
- Updated dependencies [848b486b, dba6faf2, 6ce44a05, f59730ce, 09458f52, 050b511c]:
  - @xyflow/[email protected]
Open source →
12.6.415 May 2025
Release notes
Patch Changes
- #5263 e4a8d4b4 Thanks @moklick! - Multi select key works when input is focused
- #5266 77107453 Thanks @peterkogo! - Fix connection snapping for handles larger than connectionRadius
- Updated dependencies [77107453]:
  - @xyflow/[email protected]
Open source →
12.6.314 May 2025
Release notes
Patch Changes
- #5259 77bf79c4 Thanks @peterkogo! - Fix background-color css variable fallback.
- Updated dependencies [77bf79c4]:
  - @xyflow/[email protected]
Open source →
12.6.214 May 2025
Release notes
Patch Changes
- #5257 b1314be0 Thanks @moklick! - Use OnReconnect from system
- Updated dependencies [a95f0e2f]:
  - @xyflow/[email protected]
Open source →
12.6.112 May 2025
Release notes
Patch Changes
- #5249 895b5d81 Thanks @moklick! - Call onNodesChange for uncontrolled flows that use updateNode
- #5247 67e1cb68 Thanks @moklick! - Cleanup TSDoc annotations for ReactFlow
- Updated dependencies [2a03213b]:
  - @xyflow/[email protected]
Open source →
12.6.017 Apr 2025
Release notes
Minor Changes
- #5219 4236adbc Thanks @moklick! - Add initialMinZoom, initialMaxZoom and initialFitViewOptions to ReactFlowProvider
- #5227 a7d10ffc Thanks @moklick! - Add resizeDirection prop for the NodeResizeControl component
Patch Changes
- #5217 bce74e88 Thanks @moklick! - Keep node seleciton on pane click if elementsSelectable=false
- Updated dependencies [a7d10ffc, 4e681f9c]:
  - @xyflow/[email protected]
Open source →
12.5.614 Apr 2025
Release notes
Patch Changes
- #5212 0f43b8ea Thanks @moklick! - Add polyfill for Promise.withResolvers
- #5192 fc241253 Thanks @peterkogo! - Optimize performance of nodesInitialized
- #5196 7f902db4 Thanks @moklick! - Hide edge marker and attribution for screenreaders
- #5213 78782c16 Thanks @moklick! - Do not trigger selection events if elementsSelectable=false
- #5191 e5735b51 Thanks @peterkogo! - Fix legacy padding being slightly larger than before
- Updated dependencies [0f43b8ea, fc241253, 98fe23c7, e5735b51]:
  - @xyflow/[email protected]
Open source →
12.5.57 Apr 2025
Release notes
Patch Changes
- #5172 e6139a00 Thanks @dimaMachina! - Improve TSDoc comments for useNodesData, useReactFlow, isNode and isEdge
- #5165 d536abea Thanks @dimaMachina! - Improve TSDoc comments for useViewport, useUpdateNodeInternals, useOnSelectionChange, useNodesInitialized hooks and UseOnSelectionChangeOptions, UseNodesInitializedOptions types
- #5171 62d87409 Thanks @dimaMachina! - Improve TSDoc comments for ReactFlowProps
- #5154 d0237166 Thanks @ibagov! - Improve TSDoc comments for onNodesChange
- #5174 ae585d13 Thanks @dimaMachina! - Improve TSDoc comments for BaseEdgeProps
- #5159 0c1436d6 Thanks @dimaMachina! - Improve TSDoc comments for useConnection hook
- #5167 934ea42d Thanks @dimaMachina! - Improve TSDoc comments for useEdges, useInternalNode, useNodes and useNodeId hooks
- #5163 ab800054 Thanks @dimaMachina! - Improve TSDoc comments for useNodesState and useEdgesState hook
- #5160 b357f43d Thanks @dimaMachina! - Improve TSDoc comments for type UseHandleConnectionsParams and useHandleConnections hook
- #5162 29f4aeb2 Thanks @dimaMachina! - Improve TSDoc comments for type UseNodeConnectionsParams and useNodeConnections hook
- #5164 09021550 Thanks @dimaMachina! - Improve TSDoc comments for type UseOnViewportChangeOptions and useOnViewportChange hook
- #5166 701ad17e Thanks @dimaMachina! - Improve TSDoc comments for useStore hook
- #5170 eb2a33c6 Thanks @dimaMachina! - Improve TSDoc comments for interface GetSimpleBezierPathParams and getSimpleBezierPath
- #5161 c4efe749 Thanks @dimaMachina! - Improve TSDoc comments for type UseKeyPressOptions and useKeyPress hook
- Updated dependencies [02a3b746, cbe305e1, 1f671bd4, aaebc462, 6ec942fc]:
  - @xyflow/[email protected]
Open source →
12.5.42 Apr 2025
Release notes
Patch Changes
- #5134 7acab1e1 Thanks @dimaMachina! - Adjust @default TSDoc tags for BackgroundProps
- #5135 754a1671 Thanks @dimaMachina! - Improve TSDoc comments for NodeResizerProps and ResizeControlProps
- #5140 82e6860e Thanks @dimaMachina! - Improve TSDoc comments for MiniMapProps and PanelProps
- #5147 f819005b Thanks @moklick! - Pass dimensions to final resize change event
- #5143 b1e1cc11 Thanks @dimaMachina! - Improve TSDoc comments for ReactFlowInstance and GeneralHelpers
- #5138 d4eb8d52 Thanks @dimaMachina! - Improve TSDoc comments for ViewportHelperFunctions and NodeToolbarProps
- #5144 5a1ce56e Thanks @dimaMachina! - Compare nodeStrokeWidth with number, not with string within MiniMap
- #5141 06cf4c10 Thanks @dimaMachina! - Improve TSDoc comments for Edge, BaseEdgeProps and ConnectionLineComponentProps
- Updated dependencies [f819005b, 24a1bc89, 36657cd6, 89de9ca8, 2ac6e155, f0f378e5]:
  - @xyflow/[email protected]
Open source →
12.5.31 Apr 2025
Release notes
Patch Changes
- #5132 75ab8942 Thanks @peterkogo! - Fix fitView not working when onNodesChange is not defined.
Open source →
12.5.231 Mar 2025
Release notes
Patch Changes
- #5124 b76f7f9e Thanks @bjornosal! - Export NodeConnection type
- #5127 3079c2c9 Thanks @peterkogo! - Fix fitView not working when returning early in onNodesChange.
Open source →
12.5.127 Mar 2025
Release notes
Patch Changes
- #5120 6dfea686 Thanks @moklick! - Handle fitView for uncontrolled flows
Open source →
12.5.027 Mar 2025
Release notes
Minor Changes
- #5067 acba901d Thanks @peterkogo! - You can now express paddings in fitViewOptions as pixels ('30px'), as viewport percentages ('20%') and define different paddings for each side.
Patch Changes
- #5109 0cdda42c Thanks @dimaMachina! - fix: improve TSDoc comments for BackgroundProps
- #5059 065ff89d Thanks @bcakmakoglu! - Prevent onPaneClick when connection is in progress. Closes #5057
- #5110 7eb6eb07 Thanks @dimaMachina! - fix: improve TSDoc comments for EdgeLabelOptions and BaseEdgeProps
- #5113 bce8542d Thanks @dimaMachina! - fix: improve TSDoc comments for ControlProps
- #5116 58942154 Thanks @dimaMachina! - fix: improve TSDoc comments for NodeToolbarProps
- #5114 ba2bfbb4 Thanks @dimaMachina! - feat: export EdgeLabelRendererProps
- #5107 c5a8c237 Thanks @moklick! - Add TSDoc annotations for exported edges
- #5067 cb685281 Thanks @peterkogo! - Fix fitView not working immediately after adding new nodes
- #5115 c2154557 Thanks @dimaMachina! - fix: improve TSDoc comments for EdgeLabelOptions and EdgeTextProps
- #5093 65825e89 Thanks @moklick! - Hidden nodes are not displayed in the mini map anymore
- #5090 8da1748a Thanks @moklick! - Release key even when an inout field is focused
- Updated dependencies [5d15b01b, cb685281, a79f30b3]:
  - @xyflow/[email protected]
Open source →
12.4.425 Feb 2025
Release notes
Patch Changes
- #5052 99dd7d35 Thanks @moklick! - Show an error if user drags uninitialized node
- #5042 2fe0e850 Thanks @moklick! - Allow click connections when target sets isConnectableStart
- #5047 b3bf5693 Thanks @moklick! - Pass generics to OnSelectionChangeFunc so that users can type it correctly
- #5053 25fb45b5 Thanks @moklick! - Remove incorrect deprecation warning
- #5033 7b4a81fb Thanks @dimaMachina! - lint: use React.JSX type instead of the deprecated global JSX namespace
- #5043 0292ad20 Thanks @moklick! - Use current expandParent value on drag to be able to update it while dragging
- #5032 5867bba8 Thanks @dimaMachina! - lint: remove unnecessary type assertions
- Updated dependencies [99dd7d35]:
  - @xyflow/[email protected]
Open source →
12.4.312 Feb 2025
Release notes
Patch Changes
- #5010 6c121d42 Thanks @moklick! - Add more TSDocs to components, hooks, utils funcs and types
- #4991 ea54d9bc Thanks @waynetee! - Fix viewport shifting on node focus
- #5013 cde899c5 Thanks @moklick! - Pass NodeType type argument from ReactFlowProps to connectionLineComponent property.
- #5008 12d859fe Thanks @moklick! - Add package.json to exports
- #5012 4d3f19e8 Thanks @moklick! - Add snapGrid option to screenToFlowPosition and set snapToGrid to false
- #5003 e8e0d684 Thanks @dimaMachina! - repair lint command
- #4991 4c62f19b Thanks @waynetee! - Prevent viewport shift after using Tab
- Updated dependencies [6c121d42, 4947029c, e8e0d684]:
  - @xyflow/[email protected]
Open source →
12.4.221 Jan 2025
Release notes
Patch Changes
- #4957 fe843982 Thanks @peterkogo! - Narrow properties selected, selectable, deletable, draggable of NodeProps type to be required.
- Updated dependencies [fe843982, e73ef09f]:
  - @xyflow/[email protected]
Open source →
12.4.116 Jan 2025
Release notes
Patch Changes
- #4949 592c7eaf Thanks @peterkogo! - Fix useNodeConnection hook not returning all connected edges.
- Updated dependencies [592c7eaf]:
  - @xyflow/[email protected]
Open source →
12.4.015 Jan 2025
Release notes
Minor Changes
- #4725 e10f53cf Thanks @peterkogo! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
Patch Changes
- #4947 868aa3f3 Thanks @moklick! - Export ResizeControlVariant correctly as a value.
- #4880 e2d849dc Thanks @crimx! - Add type check for all event targets
- #4929 4947f683 Thanks @peterkogo! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
- Updated dependencies [e2d849dc, e10f53cf, 4947f683]:
  - @xyflow/[email protected]
Open source →
12.3.69 Dec 2024
Release notes
Patch Changes
- #4846 75017939 Thanks @moklick! - Make it possible to use expandParent with immer and other immutable helpers
- #4865 2c4acc2b Thanks @moklick! - Add group node to BuiltInNode type. Thanks @sjdemartini!
- #4877 9a8309da Thanks @peterkogo! - Fix intersections for nodes with origins other than [0,0]. Thanks @gmvrpw!
- #4844 6f11e552 Thanks @moklick! - Allow custom data-testid for ReactFlow component
- #4816 43aa52a8 Thanks @moklick! - Type isValidConnection prop correctly by passing EdgeType
- #4855 106c2cf8 Thanks @mhuggins! - Support passing path element attributes to BaseEdge component.
- #4862 adf4fb4e Thanks @bcakmakoglu! - Prevent default scrolling behavior when nodes or a selection is moved with an arrow key press.
- #4875 41d4743a Thanks @peterkogo! - Prevent unnecessary rerenders of edges when resizing the flow.
- #4826 5f90acda Thanks @chrtze! - Forward ref of the div inside Panel components.
- Updated dependencies [d60331e6]:
  - @xyflow/[email protected]
Open source →
12.3.511 Nov 2024
Release notes
Patch Changes
- #4789 358eb355 Thanks @peterkogo! - Support key combinations which include '+' (e.g., 'Control++' resolves to the combination 'Control' and '+').
- #4796 73402779 Thanks @Aki-7! - Fix number of issues connected to batching node & edge updates.
- #4790 2fa9a920 Thanks @peterkogo! - Fix node dragging & resizing while zooming on flow that does not cover whole browser window.
- #4782 323e1b35 Thanks @peterkogo! - Fix node intersections in nested flow.
- Updated dependencies [2fa9a920, 323e1b35]:
  - @xyflow/[email protected]
Open source →
12.3.431 Oct 2024
Release notes
Patch Changes
- #4772 7f670ab0 Thanks @mistic! - Splits exports field in package.json to support an explicit resolution for browser, node and default to resolve issues with webpack esm module resolution.
- Updated dependencies [7f670ab0]:
  - @xyflow/[email protected]
Open source →
12.3.330 Oct 2024
Release notes
Patch Changes
- #4755 005ae1c0 Thanks @peterkogo! - Add module to exports in package.json. This should resolve possible issues with Webpack ESM Module Resolution.
- #4730 2c590b90 Thanks @peterkogo! - Fixed rare crash while dragging
- Updated dependencies [005ae1c0, 2c590b90]:
  - @xyflow/[email protected]
Open source →
12.3.210 Oct 2024
Release notes
Patch Changes
- #4722 e816bb69 Thanks @moklick! - Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer
Open source →
12.3.126 Sept 2024
Release notes
Patch Changes
- #4670 b056564c Thanks @peterkogo! - Fix initial fitView not working correctly for nodeOrigin other than [0,0]
- #4670 b056564c Thanks @peterkogo! - Improve fitView to respect clamped node positions based on nodeExtent
- #4653 02390f99 Thanks @bcakmakoglu! - Calculate viewport dimensions in fitView instead of using stored dimensions. Fixes #4652
- Updated dependencies [99ba64ac, b056564c]:
  - @xyflow/[email protected]
Open source →
12.3.012 Sept 2024
Release notes
Minor Changes
- #4477 d5592e75 Thanks @peterkogo! - Add getNodesBounds to useReactFlow/useSvelteFlow hook as the new recommended way of determining node bounds.
Patch Changes
- #4630 4347269f Thanks @moklick! - Fix <Minimap /> only displaying nodes when providing onNodesChange.
- #4572 d9563505 Thanks @peterkogo! - Improve handling of global and individual nodeExtents. Nodes will never render outside of specified extents.
- Updated dependencies [d5592e75, d9563505]:
  - @xyflow/[email protected]
Open source →
12.2.14 Sept 2024
Release notes
Patch Changes
- #4619 a7eb7c2d Thanks @moklick! - align background pattern with snap grid
- #4611 2aaa709c Thanks @moklick! - make onViewportChange a dynamic prop
- Updated dependencies [2aaa709c]:
  - @xyflow/[email protected]
Open source →
12.2.028 Aug 2024
Release notes
Minor Changes
- #4574 b65aed19 Thanks @bcakmakoglu! - Add getHandleConnections helper to useReactFlow & useSvelteFlow
Patch Changes
- #4594 5138d90b Thanks @peterkogo! - Fixed reconnecting edges with loose connectionMode
- #4603 12dbe125 Thanks @moklick! - use correct index when using setNodes for inserting
- Updated dependencies [5138d90b, 12dbe125]:
  - @xyflow/[email protected]
Open source →
12.1.119 Aug 2024
Release notes
Patch Changes
- #4568 c3e62782 Thanks @peterkogo! - Only display grab cursor when panOnDrag is on left mouse button
- #4567 cc75c29f Thanks @peterkogo! - Fix internal type of edges in store
- Updated dependencies [c3e62782]:
  - @xyflow/[email protected]
Open source →
12.1.015 Aug 2024
Release notes
Minor Changes
- #4555 24e87e39 Thanks @peterkogo! - Added final connection state as a function parameter to onReconnectEnd
- #4554 cca11ea1 Thanks @peterkogo! - Added optional selector for useConnection hook
- #4549 99733c01 Thanks @moklick! - feat(onConnectEnd): pass connectionState param
Patch Changes
- #4550 41981970 Thanks @moklick! - fix(fitView): only trigger for resize observer
- #4501 ec64b572 Thanks @jeffgord! - fix(background): use offset prop correctly for dots variant
- #4548 692e6440 Thanks @peterkogo! - Replaced algorithm used for searching close handles while connecting
- #4547 fdff601d Thanks @moklick! - chore(react): re-export Handle type
- Updated dependencies [b63a3734, 24e87e39, 692e6440, 559d4926, 4ecfd7e1, e7ef328f, 99733c01]:
  - @xyflow/[email protected]
Open source →
12.0.430 Jul 2024
Release notes
Patch Changes
- #4480 aae526f4 Thanks @peterkogo! - fix(dragging) nodeExtent breaks dragging nodes in subflows
- #4498 7a6e9e30 Thanks @peterkogo! - fix(pane) only capture pointer after a valid selection has started, fixes #4492
Open source →
12.0.318 Jul 2024
Release notes
Patch Changes
- Updated dependencies [543c0939, 89cd677b, c253c7c5]:
  - @xyflow/[email protected]
Open source →
12.0.215 Jul 2024
Release notes
Patch Changes
- #4446 80baf53b Thanks @moklick! - fix(resizer): export types
- #4450 18a12661 Thanks @moklick! - fix(selection): dont trigger onSelectionEnd on click
- #4451 4cccd06a Thanks @moklick! - add nodeClickDistance
- Updated dependencies [80baf53b, 4cccd06a]:
  - @xyflow/[email protected]
Open source →
12.0.110 Jul 2024
Release notes
Patch Changes
- #4434 1bda2451 Thanks @moklick! - fix(selection): handle pointer capture for selectionOnDrag
- #4432 d2da5765 Thanks @moklick! - refactor(useConnection): return internal node, add node generic
- Updated dependencies [d2da5765]:
  - @xyflow/[email protected]
Open source →
12.0.09 Jul 2024
Release notes
React Flow 12 is finally out! With a new package name @xyflow/react!

Main features
- SSR / SSG: you can define width, height and handles for the nodes. This makes it possible to render a flow on the server and hydrate on the client: SSR guide
  - Details: In v11, width and height were set by the library as soon as the nodes got measured. This still happens, but we are now using measured.width and measured.height to store this information. In the previous versions there was always a lot of confusion about width and height. It’s hard to understand, that you can’t use it for passing an actual width or height. It’s also not obvious that those attributes get added by the library. We think that the new implementation solves both of the problems: width and height are optional attributes that can be used to define dimensions and the measured dimensions are stored in measured.
- Reactive Flows: The new hooks useHandleConnections and useNodesData and the new updateNode and updateNodeData functions can be used for managing the data flow between your nodes: computing flows guide
  - Details: Working with reactive flows is super common. You update node A and want to react on those changes in the connected node B. Until now everyone had to come up with a custom solution. With this version we want to change this and give you performant helpers to handle this. If you are excited about this, you can check out this example:
- Dark mode and css variables: React Flow now comes with a built-in dark mode, that can be toggled by using the new colorMode prop (”light”, “dark” or “system”): dark mode example
  - Details: With this version we want to make it easier to switch between dark and light modes and give you a better starting point for dark flows. If you pass colorMode=”dark”, we add the class name “dark” to the wrapper and use it to adjust the styling. To make the implementation for this new feature easier on our ends, we switched to CSS variables for most of the styles. These variables can also be used in user land to customize a flow.
More features and updates

There is more! Besides the new main features, we added some minor things that were on our list for a long time. We also started to use TS docs for better docs. We already started to add some docs for some types and hooks which should improve the developer experience.
- useConnection hook: With this hook you can access the ongoing connection. For example, you can use it for colorizing handles styling a custom connection line based on the current start / end handles.
- Controlled viewport: This is an advanced feature. Possible use cases are to animate the viewport or round the transform for lower res screens for example. This features brings two new props: viewport and onViewportChange.
- ViewportPortal component: This makes it possible to render elements in the viewport without the need to implement a custom node.
- onDelete handler: We added a combined handler for onDeleteNodes and onDeleteEdges to make it easier to react to deletions.
- onBeforeDelete handler: With this handler you can prevent/ manage deletions.
- isValidConnection prop: This makes it possible to implement one validation function for all connections. It also gets called for programmatically added edges.
- autoPanSpeed prop: For controlling the speed while auto panning.
- Background component: add patternClassName prop to be able to style the background pattern by using a class name. This is useful if you want to style the background pattern with Tailwind for example.
- onMove callback gets triggered for library-invoked viewport updates (like fitView or zoom-in)
- deleteElements now returns deleted nodes and deleted edges
- add origin attribute for nodes
- add selectable attribute for edges
- Node Resizer: child nodes don't move when the group is resized, extent and expand is recognized correctly
- Correct types for BezierEdge, StepEdge, SmoothStepEdge and StraightEdge components
- New edges created by the library only have sourceHandle and targetHandle attributes when those attributes are set. (We used to pass sourceHandle: null and targetHandle: null)
- Edges do not mount/unmount when their z-index change
- connection line knows about the target handle position so that the path is drawn correctly
- nodeDragThreshold is 1 by default instead of 0
- a better selection box usability (capture while dragging out of the flow)
- add selectable, deletable, draggable and parentId to NodeProps
- add a warning when styles not loaded
Open source →
12.0.0-next.289 Jul 2024pre-release
Nothing published for this version
12.0.0-next.278 Jul 2024pre-release
Nothing published for this version
12.0.0-next.264 Jul 2024pre-release
Nothing published for this version
12.0.0-next.251 Jul 2024pre-release
Nothing published for this version
12.0.0-next.2420 Jun 2024pre-release
Nothing published for this version

@xyflow/react

Release timeline

Releases

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

12.11.0

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Main features

More features and updates