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 👀
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 🧵…
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
🧵
ALT Svelte Flow - build infinitely customizable node-based UIs. 6 screenshots of different node-based apps.
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"
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…
🚀 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-…
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 ⬇️
ALT The dashboard of the React Flow Pro Platform where users can view pro examples, submit a github issue, invite team members, and more
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.
☀️ 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/
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…
ALT A collection of messages on discord where people ask us to port React Flow to other front-end frameworks like solidjs, svelte, preact, flutter, and angular.
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.
🥁 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
⚡️ React Flow explained in 60 seconds ⚡️
Including the basics, plug-in components, favorite code examples, and live apps created by our wonderful community 💕
🔥 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…
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…
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…
🔬 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! 💫
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
Everyone calm down, we have at *least* another week until you can just draw our libraries into existence
sorcery by @tldraw
ALT On the left side is a flowchart in a hand-drawn style using a digital tool, with some description text around it in red text. On the left is the app it auto-generated. The app on the right does not look like the concept drawn on the left.
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"
🆕 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.
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
🔥 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…
ALT screenshots of Svelte Flow with dark and light mode.
🎉🎉🎉 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
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
🆕 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 🤖
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
ALT Screenshot of an app that uses boxes and lines that are used to calculate sack weight.
ALT A industrial-looking workflow editor
ALT An app called "AppBlocks" with nodes in a workflow, some say things like "LED Pattern" or "sprinkler-on-when-low"
ALT 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.
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…
✏️ 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…
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
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…
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/…
ALT Screenshot. On the left is code and two boxes on a canvas, which is mirrored on the right. The two boxes on the canvas can be downloaded as html, png, or jpg
🔥🔥🔥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
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/…
🏠 New org and repo on Github: github.com/xyflow/xyflow
📦 Package name for Svelte Flow is @xyflow/svelte (@xyflow/react coming soon 👀)
✍🏻 xyflow.com has our blog, projects, and everything about our team
🔀 Our Discord, socials, etc. have been renamed
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/🧵
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…
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
ALT A screenshot of the DoubleLoop app, which shows a graph that displays inputs on the left like Sessions per week and premium trial users, and outputs data on the right like ARR and Monthly Retention
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-…
⚡️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
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…
ALT photo of dog in an office, christopher and moritz looking at a template for mounting a whiteboard, whiteboard sketches, and a baseball cap with the react flow logo
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 😊
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!
🎺 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 💅🏻💅🏻)
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/showcasegetzenai.com/@FabianHertwig
ALT Nodes on a canvas that are attached like a workflow, and have labels like "estimate," "create stories," and "miro board"
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…
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"
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
🚀 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-…
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/🧵
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…
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…
👋 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…
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…
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…
The latest #datablocks version comes with some fancy updates:
✨ cleaner UI without sidebar
🔍 searchable block library
👉 new blocks: http request & export
datablocks.pro
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/
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
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…
ALT React Flow screenshot - comparison of edge label position of previous and current version
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/
ALT A web application showing a map of the Netherlands, with a flow diagram overlayed on top of it