Timeline

What's new?

We're always working on the React Flow docs and the library.
This is a timeline of the things we've added or changed so far.

Hayleigh Thompson
Developer Relations

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

Moritz Klack
xyflow

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

Peter Gorzo
xyflow
Hayleigh Thompson
Developer Relations

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.

This is a Pro example. Get all pro examples, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.

Permalink

Hayleigh Thompson
Developer Relations

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

Moritz Klack
xyflow

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

Hayleigh Thompson
Developer Relations

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

John Robb
is typing...
Hayleigh Thompson
Developer Relations

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

Christopher Möller
xyflow
John Robb
is typing...

React Flow Pro Platform goes open source!

A screenshot of the new Pro Platform design.

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

Hayleigh Thompson
Developer Relations

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

Moritz Klack
xyflow

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

Hayleigh Thompson
Developer Relations

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

John Robb
is typing...

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