Whats New in React Flow 12.3.5

Patch Changes

• #4789 Support key combinations which include + (e.g., Control++ resolves to the combination Control and +).
• #4796 Thanks @Aki-7! - Fix number of issues connected to batching node & edge updates.
• #4790 Fix node dragging & resizing while zooming on flow that does not cover whole browser window.
• #4782 Fix node intersections in nested flow.

Permalink

Introducing React Flow Components - powered by shadcn CLI

We’ve been interested in developing reusable components for React Flow for a while now. With the recent releases of shadcn CLI, we’ve made that happen! Some interesting components from the initial set include:

• A database schema node that makes it easy to visualise tables and relationships between columns.

• A zoom slider for more convenient control over the viewport zoom level.

• Debugging components that make it easier to inspect a node’s properties and the state of your flow.

We’re excited to see what you build with these components, and we’re looking forward to hearing your feedback! Please open issues on our web repo if you run into any problems or have any suggestions for new components, and definitely tweet at us at @xyflowdev if you build something cool with them!

If you want to read the entire relase blog post, you can find it on the xyflow blog here.

Permalink

Whats New in React Flow 12.3.4

Patch Changes

• #4772 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.

Permalink

Whats New in React Flow 12.3.3

Patch Changes

• #4755 Add module to exports in package.json. This should resolve possible issues with Webpack ESM Module Resolution.
• #4730 Fixed rare crash while dragging

Permalink

We’ve updated our example viewer!

For a long time now our examples have been built on top of Sandpack. This has been a powerful tool for us to provide interactive examples in our docs but it’s also come at a cost.

The problems

We liked Sandpack, but we kept brushing up against some pain points that ultimately we decided we couldn’t ignore.

• Our examples were slow to load. Sandpack is an impressive tool, but it is also a heavy one. The sandpack client itself takes a moment to load, and then if an example included dependencies those would need to be fetched as well. For one-off example pages this wasn’t terrible, but particularly for longer docs pages like our guides or tutorials this could really kill the momentum.

• Sandpack didn’t properly support Svelte when we first released Svelte Flow. Ultimately we ended up developing a separate SvelteKit app to host our Svelte examples and adapted our example viewer to switch between Sandpack examples and simple iframe embeds.

• Finally, developing new examples was a pain. The source code for our React examples lived in folders deep inside our example viewer component and had special handling of certain files or formats that made authoring examples quite difficult: each change to an example would trigger a hot reload of our docs, which meant waiting for sandpack to reload and re-render the example again and again.

And on top of all that we had an entirely separate app we used to generate the screenshots for our examples overview page!

The solution

We were quite happy with how our Svelte examples worked (thank you Peter), and decided we wanted to explore a unified solution that would work for both our Svelte and React examples. In the end, we landed up with something even simpler than our SvelteKit app, dropping the need for a server entirely and instead serving everything from a static site.

We’ve created a single example-apps app in our monorepo that uses vite to serve our examples during development and build them into static files for production. If you’re curious, you can find a plain directory of all our examples over at examples-apps.xyflow.com.

We also made authoring examples easier. Developing examples now more closely resembles developing a standalone app, and we put together a simple scaffold script to help us quickly create new examples:

The scaffold script helps you quickly put together a new example for either
reactflow.dev or svelteflow.dev by copying over the boilerplate. All arguments
are *required*.
 
USAGE:
 
  pnpm scaffold <FRAMEWORK> <ROUTE>
 
EXAMPLES:
 
  pnpm scaffold react blog/web-audio/demo
 
  pnpm scaffold svelte guides/getting-started
 
ARGUMENTS:
 
  FRAMEWORK   'react' | 'svelte'
 
              The framework the example will be written in. This affects where
              the generated files are placed in conjuction with the ROUTE
              argument.
 
  ROUTE       string
 
              The route fragment the example app will be served at when combined
              with the FRAMEWORK argument. For example, calling the script as
              `pnpm scaffold react examples/nodes/custom-node` will scaffold
              the example and make it accessible at
              '/react/examples/nodes/custom-node/index.html'.

Are there any downsides?

We’ve lost one big feature in the transition: the ability to edit examples directly on the docs site. For some users this might be a big deal, but to compensate we now support opening the examples in StackBlitz in addition to CodeSandbox!

Wrap up

That’s all for now folks ✌️. For most people this change should be seamless with a free boost to performance to boot. If we’ve managed to break anything in the migration please let us know by opening an issue, and if you think the changes are excited we’d love if you tweeted about it and tagged us @xyflowdev!

Permalink

Whats New in React Flow 12.3.2

Patch Changes

• #4722 Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer

Permalink

Whats New in React Flow 12.3.1

Patch Changes

• #4670 Fix initial fitView not working correctly for nodeOrigin other than [0,0]

• #4670 Improve fitView to respect clamped node positions based on nodeExtent

• #4653 Calculate viewport dimensions in fitView instead of using stored dimensions. Fixes #4652

• #4681 Fix crash when deleting nodes while dragging. Closes #4677

Permalink

Whats New in React Flow 12.3.0

Minor Changes

• #4477 d5592e75 Add getNodesBounds to useReactFlow/useSvelteFlow hook as the new recommended way of determining node bounds.

Patch Changes

• #4630 4347269f Fix <Minimap /> only displaying nodes when providing onNodesChange.

• #4572 d9563505 Improve handling of global and individual nodeExtents. Nodes will never render outside of specified extents.

Permalink

New edge examples

Here’s a care drop of new edge examples including how to animate nodes along an edge path, how to create temporary edges, and a demo of every connection event. We hope this new bundle of examples will help you level up your flow game!

This is a breakdown of what’s been added:

• Two examples in one showing how to animate SVG elements and other nodes along an edge path.

• A new example showing how to create a temporary edge attached to only one handle. These edges can be picked back up and connected at a later time.

• We have a lot of events related to connections so we’ve created a small demo showing every connection and event and when they are triggered.

Permalink

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, 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 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 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, 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 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 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.

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. 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.

Permalink