What’s new at React Flow - Fall 2022 🍂

Howdy! Here’s a dispatch straight from our desks about what’s happened in the last couple of months at React Flow: updates, news, and a peek behind-the-scenes. Here we go.

Launching v11 and post-release housekeeping

React Flow v11 went live in early October (woohoo! 🎉), and Moritz wrote a whole blog post (opens in a new tab) all about it if you haven't seen yet.

Post-launch, we took a few weeks to tend to our current structures. We made some fixes to accessibility updates from v11 (thanks to some wonderful user feedback 💕), added the new props nodesFocusable and edgesFocusable to make the keyboard handling better configurable , and took some time to refocus ourselves for the end of the year. (Shout-out to Supabase for the inspiration on post-release weeks (opens in a new tab).)

Slowly but surely, folks are starting to use our new package name. react-flow-renderer is dead, long live reactflow! (data from npmtrends (opens in a new tab))

Examples, examples, examples

We’ve added a bunch of new examples to the docs including:

• Collision Detection (opens in a new tab)
• Easy Connect (opens in a new tab)
• Download Image (opens in a new tab)
• Tailwind Implementation (opens in a new tab)
• Turborepo style (opens in a new tab)
• Light / Dark Mode (opens in a new tab)
• Workflow Builder (opens in a new tab) (aka the “taco flow” for Pro subscribers)

Our first round of user research

With the indispensable help of Eileen (opens in a new tab), we talked to some React Flow Pro (opens in a new tab) subscribers and asked them about what they expect and need from us. It was great to talk to people using React Flow on a daily basis in ways we didn’t imagine before. We’ll be doing ongoing user research with people like yourself! If you’re up for helping us with that, keep your eyes on our Discord (opens in a new tab), Twitter (opens in a new tab), or sign up for our Newsletter:

We’ll be sharing out some of those findings from our research at our lightning talk at React Day Berlin in December - if you’re coming, let us know so we can say hi 👋🏻

Explaining ourselves better

We also added some basic explainers to the docs (answering questions like “what is a handle?” (opens in a new tab)) to encourage easier onboarding for folks who are new to React Flow.

We also changed our docs to make it clear that anyone is allowed to remove the attribution (even without a subscription). React Flow is under an MIT License (opens in a new tab), so you can do anything you want with the code.

In the office

Over at our office in Kreuzberg, Berlin, we put up a whiteboard, ordered some embroidered hats, had a 4-legged visitor, and continue to be entertained by the ongoing construction site across the street.

What's next?

As we move into the winter, we’re thinking about how we want to wrap up this year, and what 2023 will bring. Some of the big questions we’re asking ourselves these days are:

• How might we help devs to improve the UX of their flows? (maybe themes, guides about styling, or sharing more custom styles?)
• Giving more opportunity for feedback and discussion with the React Flow community
• Show and tell more openly about what we do and how we do it at React Flow

And finally, Moritz made this handy custom node.

Happy coding and see you around!

John