New tutorial – Create a slide show presentation with React Flow

We recently published the findings from our React Flow 2023 end-of-year survey with an interactive presentation of the key findings, using React Flow itself. There were lots of useful bits built into this slideshow app, so we wanted to share how we built it!

Permalink

12.0.0 is out 🚀

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

Permalink

Layouting example for Entitree Flex

We add a new layouting algorithm to our example lineup with the addition of Entitree Flex. This algorithm is similar to d3-hierarchy but allows for sibling nodes as well as nodes with different dimensions.

This example was very kindly contributed by GitHub user @kaustubhxd (opens in a new tab), thanks Kaustubh! Check it out below.

Permalink

Devtools and a fresh overview example

Sometimes it's hard to understand what's going on in your React Flow app. That's why we've added a devtools section to the docs. It's a copy pastable example that explains how you can get some insights into your React Flow app. We also published a revised version of the feature overview example.

Check it out below!

Permalink

We finally made an editable edge Pro example

One of the most common questions we get from users is how to let users edit an edge's path. This Pro example demonstrates how to do exactly that, by cutting up an edge into segments that can be freely moved around.

We hope folks will find this example and use the same technique to implement features like freeform edge drawing or algorithmic edge routing.

Permalink

React Flow 12 is finally here

React Flow 12 is finally here ✨ We are super excited and hope you enjoy the new features as much as we do. The big topics for version 12 are:

1. Support for SSG/ SSR: you can now render flows on the server
2. Computing flows: new hooks and helper functions to simplify data flows
3. Dark mode: a new base style and easy way to switch between built in color modes
4. Better DX with TSDoc: we added TSDoc to improve the developer experience

If you want to migrate from 11 to 12 or check out the new features, please refer to the migration guide.

Permalink

New multi-connection line example!

Quite a while back, a user opened a GitHub issue (opens in a new tab) asking us to add the ability to draw multiple connection lines to the library. We don't have any plans to add this to the library itself, but we hope this example helps folks who need this functionality in their own apps. Check it out here.

Permalink

New ELKjs example

We added a new example for a more advanced usage of ELKjs (opens in a new tab) to show how to use it with nodes with multiple handles. As you can see in the example, edge crossing is handled automatically by ELKjs and the nodes are ordered with help of the handle position. Check it out here.

Permalink

New node toolbar example!

Buried away in our API reference is the documentation for our <NodeToolbar /> component. We've been missing an example to accompany it though, so we've published a new example to show how it can be used. Check it out here.

Permalink

The first annual React Flow Developer Survey launches!

We've been doing this React Flow thing for a while now and between issues on GitHub and conversations on our Discord server (opens in a new tab), we've learned a lot about what our users want and need from the library. It's a lot harder to hear about people's experience with our docs or from the large number of users that might not be actively taking part in our communities, though.

In the past we've arranged interviews with some of our Pro subscribers to get an idea of how they use React Flow and the Pro Platform and found the insight invaluable. This year we want to expand that to include as many of our users as possible, so we've put together a short survey to help steer our direction going into the new year.

It should only take a few minutes to complete and we'd really appreciate it if you could find the time to fill it out. You can find the survey here (opens in a new tab) and we'll be publishing the results early in the new year!

Permalink

React Flow Pro Platform goes open source!

We fund our open source libraries with React Flow Pro (opens in a new tab) subscriptions. Subscribers get access to our Pro Platform where they can view advanced examples, contact us for 1:1 support, and help us prioritize GitHub issues. So far that code has been private but we've rebuilt it from the ground-up, added features, refreshed the design, and gave it the MIT License it deserves.

It's not plug-and-play at the moment, but we hope that some folks take a look, get inspired for their own projects, and that our Pro Subscribers like the new features we built.

Permalink

New custom edges guide!

We've added a new guide to show folks how to create their own custom edges. This guide breaks down what the <BaseEdge /> and <EdgeLabelRenderer /> components are for, and shows how to use some of the path utilities React Flow provides.

You can check it out in the customization section of our learning resources here.

Permalink

New release 11.10.0!

We want to make the migration for v12 as smooth as possible. That's why we added deprecation warnings for the following util functions:

Rename useReactFlow.project to useReactFlow.screenToFlowPosition

⚠️ changes: no need to subtract react flow bounds anymore!

before:

const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();

const position = reactFlowInstance.project({
  x: event.clientX - reactFlowBounds.left,
  y: event.clientY - reactFlowBounds.top,
});

after:

const position = reactFlowInstance.screenToFlowPosition({
  x: event.clientX,
  y: event.clientY,
});

Rename getTransformForBounds to getViewportForBounds

⚠️ changes: returns { x: number, y: number, zoom: number } instead of [number, number, number].

before:

const [x, y, zoom] = getTransformForBounds(bounds, width, height, 0.5, 2);

after:

const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2);

Rename getRectOfNodes to getNodesBounds

no changes, just a renaming.

New features

• added useReactFlow.flowToScreenPosition for completion

Besides that we fixed some bugs 🐛 You can find all change in the v11.10.0 Github release (opens in a new tab).

Permalink

New "prevent connection cycles" example!

The "Prevent connection cycles" example shows how to use the getOutgoers util to check if a new connection would cause a cycle in the flow. Check it out here.

Permalink

We refreshed our docs!

We refreshed the React Flow docs in November 2023, so things might look a little different around here:

• Docs is now called Learn. This section aims to answer the question of "how do I use X?"

• API is now called Reference. This section answers the question "what is this thing?" A big change from the previous version of our docs is that all of our types, components, hooks, and util functions now get their own page now.

• "How to" blog posts now live in Learn > Tutorials

Why the changes?

So far the docs have been growing organically since 2019, without any sort of overarching concept. While we worked on a website redesign, we decided it was time to rethink how folks are using our docs so that we can create a better developer experience. Our hope is that these changes make the docs easier to use for both experienced React Flow users and newcomers.

We also did a change of tech stack along the way. We were using Docusaurus, and now we're using Nextra (opens in a new tab). Cool beans.

If you find anything to change or improve, just click on the "Edit this page" link on the right-side of any page in our docs or open an issue over on GitHub (opens in a new tab).

Permalink