Open source libraries for interactive node-based UIs, workflow editors, diagrams, and no-code editors github.com/xyflow/xyflow 🦣 xyflow@fosstodon.org

Berlin
Hey @OpenAI :) We just saw that you are using our open source library React Flow 🔥 We offer startup discount codes :) Let us know if you are interested 👀
114
242
5,445
608,967
For the last few months we’ve been working on a project called React Flow Components, powered by the new @shadcn CLI. If you already know what that means, you can dive straight into the docs at reactflow.dev/components Otherwise, more details in 🧵…
10
21
281
70,869
We're super excited to announce Svelte Flow 🎉⚡️ svelteflow.dev/ A highly customizable open source library for building node-based UIs like workflow builders, database visualizers, data processing tools, and more. 🎁 with the library we're announcing a few goodies 🧵
11
40
257
34,131
Nice to see that @vercel is using React Flow for their AI Elements workflow example 🙌 ai-sdk.dev/elements/examples…
4
7
253
20,734
Wrongdoing? It’s open source :) they can use it! We’re just offering a startup discount 😇 (application process is rigorous though)
2
197
23,270
Allow us to reintroduce ourselves: we are ✨xyflow✨ We’re Christopher, Hayleigh, John, Moritz, and Peter, and we are the creators and maintainers of React Flow and Svelte Flow. ✌🏻 4 things that are little different now:

ALT An animation cycling between the names "xyflow," "svelte flow," and "react flow"

10
20
162
36,872
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 ⚡️ xyflow.com/blog/react-flow-1…
2
24
128
11,003
Replying to @sepinetam @OpenAI
Most rational OpenAI defender
1
102
12,844
🚀 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-flow-…
5
7
81
4,798
The React Flow Pro Platform is now open source! 🎉🎉 This app is where our subscribers can view advanced code examples, manage their team, contact us, etc. We just gave it an MIT License 🔓🙌🏻 Deep-dive: xyflow.com/blog/react-flow-p… ⬇️ Github in thread ⬇️
1
13
73
5,027
I love the calm and clean interface of Tersa ☀️ Beautiful! And it's open source 🙏 tersa.ai/
7
67
4,698
With the v12 release around the corner, here's a sneak peek at our computing flow helpers in action 🤯

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

4
4
64
3,664
🥹🥹🥹 Our xyflow repo (React Flow + Svelte Flow) just hit 20k stars on Github. Thanks everyone!!
3
3
53
3,902
☀️ We launched React Flow playground 🛝 A tiny app that lets you: - Upload or build custom flows - Experiment with layouting libraries - Tweak <ReactFlow /> props in real time - Save your flows locally and share them play.reactflow.dev/
7
58
3,364
We just ported React Flow to another framework for the first time since we open sourced it in 2019 - and we chose to port it to Svelte⚡️ Here's why we went with Svelte 🧡 xyflow.com/blog/why-svelte-f…
2
9
52
4,969
🎅 Are you still looking for a Christmas present?
2
2
47
2,546
A very good looking agent workflow builder 🔥 and open source!
Meet Sim Studio The open source agent workflow builder. Drag-and-drop building blocks to create your first agent:
2
4
49
5,616
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/xyflow/dis… Give it a test drive break it submit bug thx love you bye

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

1
5
47
3,290
Replying to @iluccasbr @OpenAI
No, you can do whatever you want with it since it’s MIT
42
12,728
🥁 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
3
3
45
5,022
⚡️ React Flow explained in 60 seconds ⚡️ Including the basics, plug-in components, favorite code examples, and live apps created by our wonderful community 💕
1
6
42
5,502
👋 Our plans for Svelte Flow: svelteflow.dev/whats-new/202… - rewrite for Svelte 5 - add more features 🚀 - align with React Flow
1
7
42
2,686
✨ We revised the edge routing behaviour and it looks so much better now!
2
3
36
🔥 We just released a new version of ReactFlow (12.9.0) and Svelte Flow (1.4.0): - new EdgeToolbar component - selections can start above nodes - stacking context for sub flows - better perf for adding and removing nodes reactflow.dev/examples/edges…
2
4
36
2,687
Thanks everyone for 17k stars on Github 😌
2
32
2,553
Did you know your browser is also a fully functional synth? 🎹 We just published a new blog post that introduces the Web Audio API and how you can hook it up to React Flow! 📝✨ reactflow.dev/blog/react-flo…
1
7
29
9,487
Update from the team! 🐜 React Flow: v11.9.0, fewer bugs, improved performance ⚡ Svelte Flow alpha in the wild 👀 A name change and website rebrush in our future 🎉 Welcoming Peter to the core team Read the full team update here: reactflow.dev/blog/svelte-fl…
6
29
1,997
🎉 We've added a new example "Turbo Flow" - it's based on the beautiful look of the turbo.build website: reactflow.dev/docs/examples/… @turborepo
4
4
30
🔬 React Flow Devtools: Copy-paste this example to reveal internals, instead of clogging your code with console.logs reactflow.dev/learn/advanced… Give it a try, let us know what you think! 💫
2
27
1,952
Flow UI powered by React Flow! @liveblocks 🤝 @zapier 🤝 @xyflowdev
Comments powered by @liveblocks.
2
27
2,044
Folks are already making amazing stuff in React Flow v12 alpha 🔥🔥 Excited to see what else people do with new features like server side rendering!
This is the first time RSC has truly blown my mind 🤯 Every time the graph changes, we're actually calculating the new layout on the server and streaming in a new graph. Client-side interactions feel seamless alongside streaming
2
25
3,536
Everyone calm down, we have at *least* another week until you can just draw our libraries into existence sorcery by @tldraw
2
1
26
3,517
React Flow v11 is out now!! 🎉🎉 You can read about all of the changes that come with this major update in our blog post here: reactflow.dev/blog/react-flo… The update includes: - Better Accessibility - Improved Edge Routing & Selection - New Background Variant - New Hooks

ALT pointing at volume knobs on an amplifier which have numbers 0 through 11. The caption says "The numbers all go to 11"

1
6
23
Amazing to see that @Wix is using React Flow in their product 🤯
🆕 Introducing the new Automation Builder Streamline automation flows with an intuitive and flexible builder that offers an easy-to-use canvas view, letting you visualize your flows, add actions, and spot errors.
1
24
1,671
🤝
We just acquired @weavy_ai, soon to be known as Figma Weave. With Weavy, you’ll get more models, more tools, more ways to create within the canvas. More to come
2
1
32
4,358
🔥 We just released Svelte Flow 0.0.28! The stable 1.0.0 is coming closer. What's new: - NodeToolbar component - Dark mode - Performance optimizations All details: svelteflow.dev/whats-new/202…
1
3
24
2,645
🎉🎉🎉 We have a big update to announce! Starting today everyone can use datablocks! With the new version you can create up to 10 flows. editor.datablocks.pro/signup
2
9
20
😍😍 Workflows looks amazing, such a nice use of React Flow 💃 (and check out the website if you haven't already retool.com/products/workflow…)
Say hello to the fusion of visual programming, code, and AI. Retool Workflows is the fastest way to automate critical business processes. Explore, join, and transform your data with real-time feedback and AI-powered actions. Deploy and manage automations with developer-first control. Used by companies like RE/MAX, OpenAI, and EquipmentShare—Workflows is now available for every team. Try it today for free: retool.com/workflows
4
25
2,551
🆕 Svelte Flow 0.0.32 comes with a built-in Node Resizer component 🌱 svelteflow.dev/examples/node… We're getting closer to Svelte Flow version 1.x.x, stay tuned 🤖
1
3
24
1,620
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
1
2
22
2,181
New Pro Example! Helper Lines 📐📏 Possibly our most satisfying example yet 😌 For snapping and aligning your nodes reactflow.dev/docs/examples/…
1
20
2,392
We just published a new pro example: 👉 Editable Edges 👈 reactflow.dev/examples/edges… This was a tough one, but it works smooth as butter!
1
19
2,004
A few UX tweaks that come with React Flow 12 for a smoother ride 🏄🏻 1️⃣ Mouse leaving the pane doesn't cancel selection 2️⃣ Connection lines bend towards target handles 3️⃣ Children stay in-place if their parent is resized
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 ⚡️ xyflow.com/blog/react-flow-1…
19
1,933
Three apps of this list are built with React Flow 🙌 one is built with Vue Flow which is heavily inspired by React Flow :)
What's the best drag-and-drop way to build AI agents right now? - Langflow - Flowise - Gumloop - n8n or something else?
1
16
2,628
✏️ 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/advanced…
1
16
7,621
Shaderfrog 2.0 alpha is out now and built with React Flow 🐸 It’s open source and has glowing edges 👾 Play with the examples (like this one) on the website shaderfrog.com/2/ @shaderfrog @andrewray
1
3
18
2,045
Big update for React Flow! Today we are releasing: 🚀 React Flow version 10 💫 A new website, docs and a blog 💎 React Flow Pro reactflow.dev/blog/react-flo…
4
16
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/misc/…
1
18
1,120
With VFX-JS you can apply shader effects to divs 😎 amagi.dev/vfx-js/
2
17
3,307
✨ Huge update! ✨ We just released: - <NodeResizer /> component reactflow.dev/docs/examples/… - "Dynamic Grouping" pro example reactflow.dev/docs/examples/…
2
5
16
🔥🔥🔥React Flow v11.2.0 is out with lots of new features: 🗺 Interactive MiniMap 🚦 Intersection Helpers 🏷 Div Based Edge Labels ❌ Delete Elements Helper github.com/wbkd/react-flow/r… #reactjs
4
16
🔥 We just released Svelte Flow 0.1.0: svelteflow.dev/whats-new/202… And updated the feature overview: svelteflow.dev/examples
3
15
2,260
🔥 We updated the "Force Layout" pro example reactflow.dev/docs/examples/…
1
14
Sci-Fi Flow 🤖
I wrapped FFmpeg with React Flow and Rust in a Cyberpunk aesthetic. @FFmpeg @xyflowdev @rustlang
16
8,767
Fresh example in the docs: 🧲 Proximity Connect 🧲 When a node is within a certain radius of another node, a connecting line appears. Great for quick workflow builders⚡️ reactflow.dev/docs/examples/…
1
12
It's been bugging us for a while that many React Flow users were building similar components in their projects. Instead of everyone reinventing the wheel, we wanted to make it easier for anyone to get started. 2/🧵
1
1
16
3,507
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 🦜 xyflow.com/blog/update-react…
1
4
15
1,687
👉 React Flow is now compatible with React 19 👈 Thanks to a new Zustand release by @dai_shi 🙏
1
1
13
949
We asked @sumitngupta from @DoubleLoopApp how their team uses React Flow: “It’s the majority of our core user experience." 😇 DoubleLoop help organizations understand how their work impacts their desired outcomes with React-Flow powered maps. Here's why they use it ✨ 🧵/4
1
2
13
1,542
Liam ERD looks so nice! I love the animated edge effect 🤩
🎉 Liam ERD is Here! - 🎨 Beautiful Layouts: Built with @vite_js & @xyflowdev - ⚡ Highly Scalable: Supports 100+ tables - 🖥️ Web & CLI: Easy CI integration - 🔧 Wide Schema Support: @PostgreSQL, @rails, @prisma, and more - 🛠️ Open-Source: Apache-2.0 licensed
1
7
15
3,622
New Tutorial! 💡Make a Mindmap with React Flow💡 This will guide you step-by-step from an empty white page to building a fully functional React Flow app 🚀 reactflow.dev/blog/mind-map-…
2
6
14
2,301
Great example for changing node content based on the zoom level 👌
⚡️Adaptive zoom level for Workflow builder – outcome of the hackathon we had today @primer_io and I’m proud of! This idea was delivered in 1.5h 😅 #productdesign
2
15
1,134
Today we're sharing beyond our commit messages with a freshly cooked blog post on what we've been up to at React Flow ✒️✨ This update includes baseball caps, user research, and how reactflow is catching up to react-flow-renderer 🧢🔬📦 reactflow.dev/blog/react-flo…
2
12
Say hello to @hayleighdotdev, the newest member of the React Flow team! 👋🏻 She's an enthusiast of Gleam, Elm, and her two cats Ada and Haskell 🐱🐱 You'll be seeing her around the React Flow community, so be sure to give her a warm welcome 😊
2
14
1,050
Nice usage of React Flow for the landing page 👌
With database.build, you can create an unlimited number of databases using AI! You can create dummy data or import data from CSV files. You can now deploy the database you built on database.build to Supabase with a click of a button!
12
2,109
🎉We are super happy to be nominated for the Open Source Awards in the category "The Most Exciting Use of Technology"! osawards.com/react/#nominees
2
5
13
🎺 The 2023 end-of-year React Flow Survey results are finally here!! 🎺 reactflow.dev/developer-surv… 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 💅🏻💅🏻)
1
15
1,269
👀 We created a list with resources for node-based UIs. Open an issue or PR if you miss something! github.com/wbkd/awesome-node…
2
5
14
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/ @FabianHertwig
1
1
13
1,021
Come work with us at React Flow! We're hiring a JS developer in Berlin 🛸 If this is up your alley, we'd love to hear from you 📷✨ wbkd.notion.site/Job-Opening…
2
3
13
1,562
We're looking for someone to join our team to help maintain the React Flow Library 🌱 Check out the full job post and we'd love to hear from you! 📮 wbkd.notion.site/Job-Opening…

ALT two boxes shaking hands. First box says "nice to" second box says "meet you"

3
12
1,439
Here we go! @reactdayberlin Looking forward to all the talks and conversations today ✨
2
12
Thanks @coderabbitai for sponsoring our work on Github 🙏 github.com/sponsors/xyflow
1
14
1,591
This looks like a great cleanup ✨
Today we say goodbye to Gumloop spaghetti 🚫🍝 We've redesigned the flow builder to make it easier to pass data from one node to another. One final time, a 🧵 of our favorite spaghetti
13
2,356
We highly recommend Nhost! We've built the backend for React Flow Pro and Datablocks with it 🚀
🚀 Launch Alert 🚀 A few weeks ago, we had a fantastic Launch Week with 5 big launches. Now we're back for more. This time on Product Hunt. And for today's launch, we would LOVE your support. Please share your feedback and support us on Product Hunt. producthunt.com/posts/nhost-…
1
10
Some highlights from our initial component set include… • Database schema node for visualizing tables • Zoom slider for viewport control • Debugging tools for inspecting node properties 6/🧵
1
1
13
3,030
One final behind-the-scenes update before 2023 ⛷ - v11.4.0 release! Pan, zoom, and select like your favorite design tools - New Helper components: Edge labels, node resizing, and toolbars - New Intersection and refactored Resize & Rotate examples reactflow.dev/blog/react-flo…
3
12
1,006
New Example! Temporary edges (aka ghost nodes 👻) Want to leave your connecting lines behind and come back to them later? They'll be right where you left them 😌 reactflow.dev/examples/edges…
1
13
1,092
🆕🦌 ELKjs users! We just added a React Flow example to show how to use ELKjs with multiple handles reactflow.dev/examples/layou…
1
2
13
1,666
👋 We published a workflow editor template (pro ✨) you can use to get started quickly. It comes with: - Auto layouting - DnD sidebar - Dark mode reactflow.dev/components/tem…
1
4
13
1,839
We didn't know that you can build sankey diagrams with React Flow 🤯 🖥️ Demo: sankey-reactflow.vercel.app 👉 Built by: @AzimAhm81832848
2
1
11
1,627
✨ v11.5.0 out now ✨
Just published a new React Flow release with lots of new features 🔥 - auto pan - connection radius - better touch support - on error handler - node resizer updates reactflow.dev/blog/react-flo…
12
739
✨New example: A custom edge that always connects to the closest side of a node reactflow.dev/docs/examples/… #reactflow
1
2
13
Release day! Version ✨ 11.3.0 ✨ is here with - <NodeToolbar/> component for rendering sticky menus and tooltips (see video) - New Minimap props: ariaLabel, maskStrokeColor and maskStrokeWidth - Several fixes for flows that use nodeOrigin github.com/wbkd/react-flow/r…
2
13
Edge updates will look so much nicer with the next release 😍
1
1
11
Handy new example! See what events are called when you move and connect your edges ⚡️ reactflow.dev/examples/inter…
1
11
1,142
⭐️ React Flow Pro Platform Github github.com/xyflow/pro-platfo… 🚀 Live app: pro.reactflow.dev/ We couldn't have built it without @nextjs, @nhost, @stripe, and @shadcn /ui 💖💖
2
11
1,602
🕵🏻‍♂️ hey I have a package for you npm install @xyflow/svelte github.com/wbkd/react-flow/t…
5
11
1,822
The latest #datablocks version comes with some fancy updates: ✨ cleaner UI without sidebar 🔍 searchable block library 👉 new blocks: http request & export datablocks.pro
3
10
We updated our ✨Showcase✨ with some React Flow projects we're into right now: 🦜 LangFlow by @logspace_ai 🧊 threeGN by @roman01la 🧠 Traverse by @DominicZijlstra and more over here 👉🏻 reactflow.dev/showcase/
7
11
1,533
📖 svelteflow.dev is live! with ✨ 20+ code copy-pasteable Svelte Flow code examples ✨ Guides for custom nodes, theming, subflows ✨ API Reference and...
1
2
10
1,356
Loveee how these custom nodes are looking ✨✨
1
2
11
1,039
This looks so good 💯 and it's built with React Flow 🎉
Excited to share a sneak peek of my new @obsdmd plugin :) • Browse the web spatially on an infinite canvas 💠 • Visually organize and connect your notes, videos, pdfs and websites 🛸 • Sketch and mind-map over a whiteboard 🎨 @TfTHacker @joshm @Mappletons @viticci
9
This looks slick 🔥 Built with React Flow 🙏
ANNOUNCING Flojoy! A no-code, Python-based desktop app for scientific DAQ & robotics Today we’re announcing this app & seed funding from @flybridge, @BDC_Capital, & boreal.vc Letter from CEO: community.flojoy.ai/t/announ… Techcrunch: techcrunch.com/2023/08/29/fl…
1
10
996
A new release is here ✨✨ v11.8.0 ✨✨ ⌨️ better key defaults and scroll behaviour for Windows users 🤓 improved step edge routing and label positions ⚡️12 issues closed github.com/wbkd/react-flow/r…
1
11
1,089
The folks over at @geoplexnews use React Flow to overlay a geodata processing workflow on top of a map 🗺 Such a unique way to use the library! 👏🏻👏🏻 reactflow.dev/showcase/
1
2
11