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:
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 ⚡️
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 💕
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! 📝✨
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:
🔬 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! ✨)
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 ⚡️
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
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.
🔥🔥🔥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⚡️
🏠 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
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 🦜
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 😊
⚡️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
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
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 🚀
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 🧢🔬📦
🎺 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 💅🏻💅🏻)
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:
@FabianHertwig
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
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
🚀 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.
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
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:
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).
The latest
#datablocks
version comes with some fancy updates:
✨ cleaner UI without sidebar
🔍 searchable block library
👉 new blocks: http request & export
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 👉🏻
✨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
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 🎉
🎉 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:
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! 🔭
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)
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 ⚡️
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 👀
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
@hayleighdotdev
✨
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 🙏🏻
🔥 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:
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." 😍
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 😌
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 :)