xyflow

⚡ We built a node-collision playground, benchmarked the algorithms, and wrote a deep-dive about it:

xyflow.com/blog/node-co...

Ready-to-use examples for React Flow & Svelte Flow !

wow! This looks super good 🙏

Svelte Meetup Berlin | Guild Dec 9th 7:00PM: Inaugural meetup of the Svelte developers community in Berlin. Number of spots is limited so please register. Agenda: Sve

Just updated the agenda for the @sveltesociety.dev Berlin meetup...

🥁 @dominikg.dev will join us to talk about remote functions (and his secret Guarana gum bears stash)

@peterkogo.bsky.social will share his experiences of working on @xyflow.com in Svelte vs React

guild.host/events/svelt...

this is so cool 🤩

Screenshot of Strudel Flow application

🥁 Introducing Strudel Flow, an experimental pattern sequencer built with Strudel and React Flow

* Drag-and-drop interface
* live pattern compilation
* color themes
* built-in instruments
* sharable URLs
• Open source ✨

xyflow.com/strudel-flow

Thanks 🙏

screenshot of freehand draw example

✏️ Whiteboard features for React Flow and Svelte Flow ✏️

We just published four new examples to cover some common use cases:

- Freehand Draw (pro)
- Lasso Selection
- Eraser
- Rectangle Draw

reactflow.dev/learn/advan...

graph shows downloads of reactflow vs. xyflow/react npm packages

After nearly a year, our new React Flow package name has finally matched our previous download numbers. Feels good 🙌

screenshot of tersa app

I love the calm and clean interface of Tersa ☀️ Beautiful! And it's open source 🙏 www.tersa.ai/

screenshot of a Svelte Flow example

🚀 HUGE NEWS! Svelte Flow 1.0 has officially landed!

- Built for Svelte 5
- Enhanced DX with TSDoc
- New features like reconnecting edges and keyboard controls
- Better docs with more guides and examples

xyflow.com/blog/svelte-...

React Glitch Flow 🤩 done with amagi.dev/vfx-js/

Nodes on a canvas that are attached like a workflow, and have labels like "estimate," "create stories," and "miro board"

New project built with Svelte Flow in our project Showcase! ⚡️ Zen AI, a no-code AI workflow automation tool

See other live projects built with Svelte Flow here: svelteflow.dev/showcase

getzenai.com

Server Side Rendering – React Flow Step-by-step guide render React Flow apps on the server for displaying static flows, dynamically generating images from flows, or rendering graphs in non-javascript environments

You can learn more about Server Side Rendering here
- Display static HTML diagrams in your docs
- Render diagrams in non-js environments
- Generate opengraph images

reactflow.dev/learn/advanc...

New Pro example! ✨ Static Server Side Rendering ✨

With React Flow 12, we can finally render flows on the server, this is our first Pro Example to show off these new features

reactflow.dev/examples/mis...

A series of slides on an infinite canvas with data and quotes from users of React Flow

This tutorial is a direct offshoot of the app we built for our 2023 end-of-year developer survey:

reactflow.dev/developer-su...

A screencapture of someone clicking arrow keys on a series of plain slides, which lets them navigate up, down, left, and right between them

Fresh tutorial has landed!! Build an infinite canvas slideshow presentation with React Flow 🍿🍿

Learn how to create:
🖋 Markdown slides
➡️ Keyboard navigation around the viewport
👾 Write your own layouting algorithm

Tutorial by
@hayleigh.dev ✨

reactflow.dev/learn/tutori...

A giant "12" on a dotted background. The React Flow logo sits underneat

React Flow ✨12✨ is here!!

Our first major release in over a year includes:
- support for server side rendering
- computing flow helpers
- built-in dark mode
- improved DX with TSDoc
- better performance ⚡️

www.xyflow.com/blog/react-f...

React Flow Developer Survey 2023 Results – xyflow With our end-of-the-year survey, we uncovered current pain points for React Flow users in our library and ecosystem, providing us a compass as we move forward with development.

We wrote up a deep-dive into our 2023 developer survey, with insights on maintaining a library like React Flow, and tips for other maintainers looking to understand more about their users. 🤿
Give it a read, let us know what you think! ✨

"Town Hall", where some of the letters turn into cartoon characters. The H turns into suspenders, and the T turns into a sticky body.

🪑 xyflow Town Hall tomorrow, June 11! 🪑
discord.gg/H2HjN4mV?eve...
⌚️ 8 SF, 11 NY, 17 Berlin, 20:30 India
Join us on Discord, bring your questions, let's talk about xyflow 🦚

Nodes with information from a developer survey on a large canvas

🎺 The 2023 end-of-year React Flow Survey results are finally here!! 🎺

reactflow.dev/developer-su...

83 React Flow users told us about the good, bad, and ugly of React Flow- we wanted to share it with y'all in the name of ✨open source✨ (built with React Flow of course 💅🏻💅🏻)

Join the xyflow Discord Server! Discuss, ask questions, and get answers about React Flow and Svelte Flow: libraries for building node-based UIs 🧵 | 4199 members

🎺 xyflow town hall is tomorrow! 🎺

See you on our discord, come with your opinions and questions 🔮
discord.gg/5nTQs9pC?eve...

Flexible data model visualization with Hubql and React Flow – React Flow We were seeking a React library that helps us to turn data models into visualization without spending too much time building abstractions and interactive elements. To save time in development we opted...

🆕 We talked to Tobias from Hubql about how they use React Flow Pro examples to speed up development of their collaborative data schema visualization tool 🏓

Thank you for your continued support!! 💜💜

Read the full case study: reactflow.dev/pro/case-stu...

Join the xyflow Discord Server! Discuss, ask questions, and get answers about React Flow and Svelte Flow: libraries for building node-based UIs 🧵 | 4178 members

Find us LIVE at our next Town Hall on May 7th 🏫

⌚️ 8:00 SF, 11:00 NY, 17:00 Germany, 20:30 India

We'll talk about what we've been working on recently, what's on our minds, and answer your questions about big-picture xyflow questions 🦜 See you there!

discord.gg/8ym4SxZx?eve...

Team Update – React Flow 12, Svelte Flow for Svelte 5, editable edges – xyflow xyflow - Customizable library for rendering workflows, diagrams and node-based UIs.

Updates from the desk of the xyflow team!

🧵 Editable edge Pro example is finally here!
🔬 Devtools for React Flow
🥁 Exploring our working rhythms
💙🧡 Making headway on two major core library updates

Get the full scoop in our team update here: www.xyflow.com/blog/update-...

Devtools and Debugging – React Flow Copy pastable devtools for React Flow

🔬 React Flow Devtools:

Copy-paste this example to reveal internals, instead of clogging your code with console.logs

reactflow.dev/learn/advanc...

Give it a try, let us know what you think! 💫

3 boxes on the left, labeled "red," "green," and "blue." They are attached to a larger node. Adjusting the numbers on the three left-most boxes changes the color of the big node in the middle, and the text color on the nodes changes so it is still readable as the boxes shift between dark and light colors.

With the v12 release around the corner, here's a sneak peek at our computing flow helpers in action 🤯

Screenshot of an app that uses boxes and lines that are used to calculate sack weight.

A industrial-looking workflow editor

An app called "AppBlocks" with nodes in a workflow, some say things like "LED Pattern" or "sprinkler-on-when-low"

A cute app with a bunch of colorful squares on a screen. Each is an ingredient that can be dragged on top of another ingredient to combine them into something new.

We just added 4 new projects to our Showcase 📺
🎲 Domino (open source workflow builder)
🥞 Food Former (mix ingredients with ChatGPT)
🎁 AppBlocks (design IoT firmware)
💾 CodeFlow (dev education- this one's in Svelte! ✨)

reactflow.dev/showcase
svelteflow.dev/showcase

Nine windows open on a computer desktop, each showing the same thing happening where a cursor is moving boxes around a screen

🆕💎 For our Pro subscribers we've revamped our Collaboration Pro example from the inside-out! Now with mirrored cursors🐁🐁

Try it out: reactflow.dev/examples/int...

(you can say "at the same time" in German in just one word: "gleichzeitig." now go tell that to your green bird app)

A user types "hello" into a node, which then leads to another node that says "uppercase transform," and the next node the text appears as "HELLO" in uppercase. Also a drop-down is clicked to toggle between dark and light mode.

React Flow v12 is in beta! 🧪 with tons of new features like

1. Server Side Rendering of flows (WHAT)
2. Helper functions to simplify data flows
3. Dark mode 😈
4. a bunch of other good stuff

github.com/xyflow/xyflo...
Give it a test drive break it submit bug thx love you bye

Node Resizer – Svelte Flow Svelte Flow - Customizable library for rendering workflows, diagrams and node-based UIs.

Svelte Flow 0.0.32 comes with a built-in Node Resizer component 🌱

svelteflow.dev/examples/nod...

We're getting closer to Svelte Flow version 1.x.x, stay tuned 🤖