We're super excited to announce Svelte Flow 🎉⚡️
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
🧵
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:
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:
⬇️ Github in thread ⬇️
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 🧡
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
Give it a test drive break it submit bug thx love you bye
⚡️ React Flow explained in 60 seconds ⚡️
Including the basics, plug-in components, favorite code examples, and live apps created by our wonderful community 💕
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:
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! 📝✨
🔬 React Flow Devtools:
Copy-paste this example to reveal internals, instead of clogging your code with console.logs
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
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:
The update includes:
- Better Accessibility
- Improved Edge Routing & Selection
- New Background Variant
- New Hooks
🔥 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:
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
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! ✨)
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
@andrewray
🔥🔥🔥React Flow v11.2.0 is out with lots of new features:
🗺 Interactive MiniMap
🚦 Intersection Helpers
🏷 Div Based Edge Labels
❌ Delete Elements Helper
#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⚡️
⚡️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
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 🚀
🏠 New org and repo on Github:
📦 Package name for Svelte Flow is
@xyflow
/svelte (
@xyflow
/react coming soon 👀)
✍🏻 has our blog, projects, and everything about our team
🔀 Our Discord, socials, etc. have been renamed
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 😊
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 🧢🔬📦
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
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 🦜
🚀 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.
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
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
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
🎺 The 2023 end-of-year React Flow Survey results are finally here!! 🎺
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 💅🏻💅🏻)
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
📢 Calling all React Flow devs! 📢
Tell us about how you use React Flow in our end-of-year survey, and help us know what to focus on going into 2024 🚀
We'll be sharing the results publicly in the new year 🎉
Still iterating & testing 🧪🧙♂️
AI features (which in the PoC were happening in the client) should finally be back this weekend (now happening fully async with much more stability, speed & capabilities).
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
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 👉🏻
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
, &
Letter from CEO:
Techcrunch:
We just added the 🏆first🏆 project to the Svelte Flow showcase: by
@sam_lavigne
Give it a whirl by picking out one of the examples and render your video 🎥
We hope to find more Svelte Flow projects out in the wild soon! 🔭
The latest
#datablocks
version comes with some fancy updates:
✨ cleaner UI without sidebar
🔍 searchable block library
👉 new blocks: http request & export
✨New Release 11.7.0 ✨
- New Handle props: isConnectableStart and isConnectableEnd
- New Edge option: updatable
- Background Combinations: id and offset props
- New MiniMap props: inversePan and zoomStep
- Package: NodeResizer integrated
🎉 2022 was a great! We got our first subscribers and released a bunch of new features, examples and documentation updates. Here is our final behind-the-scenes update:
I'm open sourcing ThreeGN, a port of Blender's geometry nodes system for web (and threejs), you can play with it at , feel free to grab the source and implement remaining nodes (a lot of them are missing atm)
Has anyone gone through a name-change without entirely messing up your search rankings? Or know someone who could help with something like that?
Asking for a friend 👀
Anyone else going to be at
@reactdayberlin
? We're giving a lightning talk on making React Flow financially sustainable. We're excited to share what we've learned so far ⚡️
🆕💎 For our Pro subscribers we've revamped our Collaboration Pro example from the inside-out! Now with mirrored cursors🐁🐁
Try it out:
(you can say "at the same time" in German in just one word: "gleichzeitig." now go tell that to your green bird app)
🔥 We've got a big update in the pipeline that makes it easier to support figma-like controls for the viewport and the selection. You can already try the next version via:
npm install reactflow
@next
Details:
Showcase:
And that’s it! We think this name fits us a little better while we work on multiple frameworks 🪩
s/o to Bruno () for the xyflow animation, and
@facumontanaro_
for the xyflow website design 🙏🏻
See how
@stripe
uses React Flow to make interactive diagrams in their docs:
"...the diagrams that are built with React Flow can easily incorporate interactivity and clickable links. They are also easier to localize and can be restyled universally." 😍
We are super happy that we found out about
@nhostio
. It has helped us to build a backend in a very short time. It works like a charm and they have great support :)
Our Spring team update is here! 🌻☀️
⛵️ v11.5.0 and v11.6.0
💎 New Pro examples
👋🏻
@hayleighdotdev
is here!
📦 Generalizing the React Flow core
💕 New Code of Conduct and a wip ethical ToS
🎙
@Fossbckstg
and our new room
I've been working on a tool to help people explore ffmpeg filters in the browser. You can now use a simple node-based editor to compose complex filtergraphs. User testers wanted!
How to take a task that is usually reserved for a few experts (solving spatial problems), and make it so anyone can do it?
@CARTO
did that with
@xyflowdev
💖
Read the full case study here: