A lot has happened since we published our last blog post six months ago. We got our first pro subscribers, we hired John who helps us with the docs, communication and community and we are all working full time on React Flow 🥳. Today we are releasing a new major version with lots of new features and very few breaking changes (unlike the last major update..).

If you are looking for the information how to upgrade, please refer to the “Migrate to v11” guide .

TLDR;

• React Flow has a new package name -> reactflow
• Better accessibility by default (keyboard controls, aria- defaults)
• Cleaner edge routing for smoothstep and step edges
• Better selectable edges with a new interactionWidth option
• New hooks: useNodesInitialized, useOnViewportChange and useOnSelectionChange

🎉 A New Package Name

The biggest change, is that we got a new package name! A very nice person gave us the reactflow npm package name and we also got the @reactflow organization. So from now on, you can install React Flow via:

npm install reactflow

pnpm add reactflow

yarn add reactflow

bun add reactflow

and then use it as before:

import { ReactFlow,  Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
...
 
<ReactFlow nodes={nodes} edges={edges}>
  <Controls />
  <Background />
</ReactFlow>

Looks nice, right? Under the hood we are publishing packages separately in the @reactflow organization. These packages are used by the main reactflow package and also can be used separately . For this we’ve rebuilt React Flow to a monorepo powered by Turborepo , Rollup  and Vite .

✨ New Features

For this release, we focused on accessibility (nothing better for a v11 release than a11y!) and edges, with some other smaller updates and stability fixes along the way.

Accessibility

Accessibility was quite limited in the previous versions and we put a lot of work into it to make it better by default. You can now interact with a flow with your keyboard. You can focus nodes and edges with Tab, select an element with Enter and move nodes around with the arrow keys.

Moreover we added default aria-labels to all elements on the pane and made them configurable with new ariaLabel options for nodes and edges. You can refer to the new Accessibility guide  for more information.

Edge Routing and Edge Selection

Whereas in v10, the nodes were a bit more in the spotlight, this time we’ve put a special focus on the edges. A lot of people complained that thin edges are hard to select. We’ve fixed that by introducing a new interactionWidth edge option. Its default value is 20, meaning that a 20px wide invisible edge gets painted below the visible edge for an easier interaction.

Another big update is a complete rewrite of the edge routing for smoothstep and step edge types.