19 December 2022

v11.4.0, design-tool components, an awesome list, and new examples

John Robb
is typing...

Hey! We wanted to share an update about what we’ve been up to before we wrap ourselves up in blankets to hibernate until the new year (we’ll be shutting our laptops from today until January 2nd ⛄). Let’s get into what’s been up the past few months, what’s coming, and what we’re excited about right now.

Pan, zoom, and select like your favorite design tools with the v11.4.0 minor release 💫

In the latest minor release (opens in a new tab), you can finally configure the controls so that they behave like Figma, Miro or Sketch. This includes click-dragging to make a selection, pan by holding the spacebar, and scrolling to zoom (opens in a new tab). You can also configure if a node is selected if it is fully inside/partially inside the selection area.

a mouse click-dragging an area over 2 nodes, then dragging those nodes as a group.

New helper components: beyond nodes and edges

As we’ve done research on apps that use React Flow, we’ve noticed a lot of folks are custom-building a lot of similar elements (or using third-party libraries) on top of React Flow. To help with this, we’ve started to build helper components including Edge labels (opens in a new tab), node resizing (opens in a new tab), toolbars and tooltips (opens in a new tab). We’re doing this work carefully, to make sure we’re not compromising the low-level simplicity of the core library, while making sure React Flow includes all components that are needed for building a node-based app.

a preview of the edge labels, node resizing, and toolbar helper components

We hope to continue on this path, this will mean talking to some of you all (yay research!) about the apps you’re building with React Flow, and how we can support you in building them.

More new examples!

Intersections (opens in a new tab): This example uses the new intersection helpers (opens in a new tab) to detect if a node intersects with another node.

a gif of one node being dropped on top of another node. When it intersects with the other node, the color of the node.

Resize and Rotate (opens in a new tab): This was a Pro example, but we decided to make the source code available to everyone in our public docs to avoid trouble people were having with third-party resizing libraries. We also refactored the code to use the new resizer component (opens in a new tab).

Dynamic Grouping (opens in a new tab) (Pro Example 💎): Grouping nodes made easy! Make new groups or add a node to an existing group by dragging a node from a drawer or using a “group nodes” button.

In other news: npm blunder, a growing list of UIs, a lightning talk

We shared our mistakes of how we lost our slick new npm package name (and then got it back).

A lot of people liked our list of Awesome Node Based UIs (opens in a new tab) with resources, libraries, and good-looking apps. Within a month of publishing it we already have more than 120 entries, 22 contributors and 1k Github stars!! So cool. And this comment (opens in a new tab) on Hackernews was too good not to share .

a screenshot from a comment on hackernews

We met people IRL at React Day Berlin and gave a lightning talk on making React Flow financially sustainable. We’re interested in giving more talks (maybe at re:publica 23 (opens in a new tab)?) and finding our community as a company, and this was one step towards that for us. The talk isn’t publicly available yet, but it will be soon here (opens in a new tab).

John standing in front of a crowd of people giving a presentation, and a selfie of Moritz and John standing outside the React Day conference building

Cheers and have a cozy winter holiday! See you in 2023.

John, Christopher and Moritz

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro