5 ms·

React Flow, open source libraries for node-based UIs with React or Svelte

168 points by mountainview 11mo ago

wallzero 11mo ago
This is an excellent library! I only wish it had react-native support. I've worked on a few prototype react directed acyclical diagram libraries. jsplumb-react, react-yad, and recently @lincle. @lincle is my most recent and first attempt at supporting react-native. I tried leveraging existing interactive libraries. I was also inspired by react-flow's minimap. It is still a prototype and needs documentation but works well. I'm realizing now the demo isn't working but the demo source should hopefully give an example of how to use it. https://gitlab.com/digested/lincle https://gitlab.com/digested/lincle
- tcoff91 11mo ago
  With expo DOM components it’s easy to just use this library and expo will wrap it in a webview. Then you can easily integrate it into a RN app.
NatKarmios 11mo ago
It's a lovely library :) I'm using it in my work on general interfaces for symbolic execution debugging.
iamcreasy 11mo ago
This is cool. Is there web component library/resources for something equivalent?
teunlao 11mo ago
Great library. Just memo your custom nodes properly - edge re-renders cascade faster than you'd expect.
- gardnr 11mo ago
  Obligatory Fireship video: https://www.youtube.com/watch?v=yl0YWA2K2B0&t=40 https://www.youtube.com/watch?v=yl0YWA2K2B0&t=40
  - Sammi 11mo ago
    It's quite impressive how many layers of oopsies there are in the React api now. The curse of being successful as a software project: more people want more from you, but you are not allowed to actually remove cruft, because too many people depend on it. 19: 193 kB -> 60.3 kB (gzip) https://bundlejs.com/?q=react%4019.2.0%2Creact%4019.2.0%2Creact-dom%4019.2.0%2Fclient%2Creact-dom%4019.2.0%2Fclient&treeshake=%5B*%5D%2C%5B%7B+default+as+reactDefault+%7D%5D%2C%5B*%5D%2C%5B%7B+default+as+reactDomDefault+%7D%5D https://bundlejs.com/?q=react%4019.2.0%2Creact%4019.2.0%2Cre... 18: 142 kB -> 45.6 kB (gzip) https://bundlejs.com/?q=react%4018.3.1%2Creact%4018.3.1%2Creact-dom%4018.3.0%2Fclient%2Creact-dom%4018.3.0%2Fclient&treeshake=%5B*%5D%2C%5B%7B+default+as+reactDefault+%7D%5D%2C%5B*%5D%2C%5B%7B+default+as+reactDomDefault+%7D%5D https://bundlejs.com/?q=react%4018.3.1%2Creact%4018.3.1%2Cre...
    - braebo 11mo ago
      The entire concept of mitigating un-intended re-rendering by wrapping your bad abstractions in more abstractions is not a category of problem for Svelte devs nor is it inherent to the platform like some inevitably of scale. React is bad because its foundation is a bad abstraction (v-dom) and it’s spent over decade pilling on more leaky abstractions every year, leading to where we are now — clamoring over a mountain of footguns and indirection.
      - Sammi 11mo ago
        Yes. VDOM is immediate mode. DOM is retained mode. Building immediate mode on top of retained mode is cursed.
- throwaway290 11mo ago
  React.memo(MyFlowNodeComponent) like this?
mootoday 11mo ago
I'm a long-time SvelteFlow user and it has never disappointed so far :). Lots of updates this year to reach parity with React Flow.
randomdrake 11mo ago
This is a well-done library that’s fun to work with. I put together a proof of concept org chart generator[0] with it a while back when working on another project. Very easy to use and well-documented. [0] - https://github.com/randomdrake/react-flow-org-chart https://github.com/randomdrake/react-flow-org-chart
steve_taylor 11mo ago
Does React Flow still advertise itself unless you pay the developers at least $169/month?
- aratahikaru5 11mo ago
  You can programmatically remove the watermark, either via a flag or by changing the source code. > [1] No, you can do whatever you want with it since it’s MIT But if you use it in a commercial project, they'll likely shame you if you don't pay - like what happened to OpenAI with Agent Builder: > [2] 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 Personally, I’d prefer them to use a dual license, but I understand that it would likely create unnecessary hurdles for devs who just want to try out the library. They explained their reasoning here: https://xyflow.com/blog/asking-for-money-for-open-source https://xyflow.com/blog/asking-for-money-for-open-source [1] https://x.com/xyflowdev/status/1975660206441820585 https://x.com/xyflowdev/status/1975660206441820585 [2] https://x.com/xyflowdev/status/1975505810768777360 https://x.com/xyflowdev/status/1975505810768777360
  - watty 11mo ago
    Agree, if they're going to guilt shame companies publicly and be defensive in replies, just dual license it. Not a great look.
taherchhabra 11mo ago
I am building https://www.flickspeed.ai https://www.flickspeed.ai using this library
CuriouslyC 11mo ago
Hah, this pops up right after I note how it's eating good with all the AI tools that use it. Deservedly so, if you're creating node based interfaces there's no reason to hand roll with D3.
krebby 11mo ago
I'm working on an open source tool called noodles.gl that uses this library and it's been great. The devs have been good about keeping a cadence of solid changes and keeping the community updated, and overall I'm happy to have bet on this library years ago. I love the flexibility and the fact that there's a variety of examples for basically anything I want to accomplish with it. Great work to the team. https://noodles.gl https://noodles.gl
Orochikaku 11mo ago
I really appreciated that they've made their pro examples available for free for education purposes. I made use of one of those examples for my undergraduate final year project.
carltheperson 11mo ago
This is a great library. I especially appreciate that they added a version for Svelte (with specific examples for Svelte 5). It's very convenient how you create the graph, with nodes just being Svelte components. Adding custom edges isn't very hard either. If you're curious what you can do with it, I made this demo for myself https://youtu.be/aVY7ySPiSo8 https://youtu.be/aVY7ySPiSo8 (never launched it). I used Svelte Flow to visualize AI doing research, my first project using LLMs.
huflungdung 11mo ago
[dead]
sroussey 11mo ago
I use this library for some in browser AI stuff. https://podley-web.netlify.app/ https://podley-web.netlify.app/
prvenkatesh 11mo ago
[dead]
anorak27 11mo ago
I made a desktop UI using react flow with resizing and deletion of windows. https://github.com/Anilturaga/Generative-UI https://github.com/Anilturaga/Generative-UI
danielfalbo 11mo ago
Supabase uses this for the Visual Schema Designer https://supabase.com/features/visual-schema-designer https://supabase.com/features/visual-schema-designer
quintu5 11mo ago
I’ve used this library on a couple of projects with great results. One, a drag-and-drop IaC builder and the other a GitHub Actions-like task execution graph viewer.
icemelt8 11mo ago
We use this for our flow builder in https://wetarseel.ai https://wetarseel.ai
- deleted 11mo ago
  [deleted]
aurareturn 11mo ago
Just what I was looking for a project.
artur_makly 11mo ago
I made https://VisualFlows.io https://VisualFlows.io with it - among many other AI powered canvases: https://www.design2dev.com/work/agentic-ai-canvases/ https://www.design2dev.com/work/agentic-ai-canvases/ Contact me for UX consulting if you need it -;) artur at design2dev.com
mediumsmart 11mo ago
I was tempted for a moment but I think it needs JavaScript

168 points by mountainview 11mo ago

This is an excellent library! I only wish it had react-native support. I've worked on a few prototype react directed acyclical diagram libraries. jsplumb-react, react-yad, and recently @lincle. @lincle is my most recent and first attempt at supporting react-native. I tried leveraging existing interactive libraries. I was also inspired by react-flow's minimap. It is still a prototype and needs documentation but works well. I'm realizing now the demo isn't working but the demo source should hopefully give an example of how to use it. https://gitlab.com/digested/lincle https://gitlab.com/digested/lincle

tcoff91 11mo ago
With expo DOM components it’s easy to just use this library and expo will wrap it in a webview. Then you can easily integrate it into a RN app.

NatKarmios 11mo ago

It's a lovely library :) I'm using it in my work on general interfaces for symbolic execution debugging.

iamcreasy 11mo ago

This is cool. Is there web component library/resources for something equivalent?

teunlao 11mo ago

Great library. Just memo your custom nodes properly - edge re-renders cascade faster than you'd expect.

gardnr 11mo ago
Obligatory Fireship video: https://www.youtube.com/watch?v=yl0YWA2K2B0&t=40 https://www.youtube.com/watch?v=yl0YWA2K2B0&t=40
- Sammi 11mo ago
  It's quite impressive how many layers of oopsies there are in the React api now. The curse of being successful as a software project: more people want more from you, but you are not allowed to actually remove cruft, because too many people depend on it. 19: 193 kB -> 60.3 kB (gzip) https://bundlejs.com/?q=react%4019.2.0%2Creact%4019.2.0%2Creact-dom%4019.2.0%2Fclient%2Creact-dom%4019.2.0%2Fclient&treeshake=%5B*%5D%2C%5B%7B+default+as+reactDefault+%7D%5D%2C%5B*%5D%2C%5B%7B+default+as+reactDomDefault+%7D%5D https://bundlejs.com/?q=react%4019.2.0%2Creact%4019.2.0%2Cre... 18: 142 kB -> 45.6 kB (gzip) https://bundlejs.com/?q=react%4018.3.1%2Creact%4018.3.1%2Creact-dom%4018.3.0%2Fclient%2Creact-dom%4018.3.0%2Fclient&treeshake=%5B*%5D%2C%5B%7B+default+as+reactDefault+%7D%5D%2C%5B*%5D%2C%5B%7B+default+as+reactDomDefault+%7D%5D https://bundlejs.com/?q=react%4018.3.1%2Creact%4018.3.1%2Cre...
  - braebo 11mo ago
    The entire concept of mitigating un-intended re-rendering by wrapping your bad abstractions in more abstractions is not a category of problem for Svelte devs nor is it inherent to the platform like some inevitably of scale. React is bad because its foundation is a bad abstraction (v-dom) and it’s spent over decade pilling on more leaky abstractions every year, leading to where we are now — clamoring over a mountain of footguns and indirection.
    - Sammi 11mo ago
      Yes. VDOM is immediate mode. DOM is retained mode. Building immediate mode on top of retained mode is cursed.
throwaway290 11mo ago
React.memo(MyFlowNodeComponent) like this?

mootoday 11mo ago

I'm a long-time SvelteFlow user and it has never disappointed so far :). Lots of updates this year to reach parity with React Flow.

randomdrake 11mo ago

This is a well-done library that’s fun to work with. I put together a proof of concept org chart generator[0] with it a while back when working on another project. Very easy to use and well-documented. [0] - https://github.com/randomdrake/react-flow-org-chart https://github.com/randomdrake/react-flow-org-chart

steve_taylor 11mo ago

Does React Flow still advertise itself unless you pay the developers at least $169/month?

aratahikaru5 11mo ago
You can programmatically remove the watermark, either via a flag or by changing the source code. > [1] No, you can do whatever you want with it since it’s MIT But if you use it in a commercial project, they'll likely shame you if you don't pay - like what happened to OpenAI with Agent Builder: > [2] 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 Personally, I’d prefer them to use a dual license, but I understand that it would likely create unnecessary hurdles for devs who just want to try out the library. They explained their reasoning here: https://xyflow.com/blog/asking-for-money-for-open-source https://xyflow.com/blog/asking-for-money-for-open-source [1] https://x.com/xyflowdev/status/1975660206441820585 https://x.com/xyflowdev/status/1975660206441820585 [2] https://x.com/xyflowdev/status/1975505810768777360 https://x.com/xyflowdev/status/1975505810768777360
- watty 11mo ago
  Agree, if they're going to guilt shame companies publicly and be defensive in replies, just dual license it. Not a great look.

taherchhabra 11mo ago

I am building https://www.flickspeed.ai https://www.flickspeed.ai using this library

CuriouslyC 11mo ago

Hah, this pops up right after I note how it's eating good with all the AI tools that use it. Deservedly so, if you're creating node based interfaces there's no reason to hand roll with D3.

krebby 11mo ago

I'm working on an open source tool called noodles.gl that uses this library and it's been great. The devs have been good about keeping a cadence of solid changes and keeping the community updated, and overall I'm happy to have bet on this library years ago. I love the flexibility and the fact that there's a variety of examples for basically anything I want to accomplish with it. Great work to the team. https://noodles.gl https://noodles.gl

Orochikaku 11mo ago

I really appreciated that they've made their pro examples available for free for education purposes. I made use of one of those examples for my undergraduate final year project.

carltheperson 11mo ago

This is a great library. I especially appreciate that they added a version for Svelte (with specific examples for Svelte 5). It's very convenient how you create the graph, with nodes just being Svelte components. Adding custom edges isn't very hard either. If you're curious what you can do with it, I made this demo for myself https://youtu.be/aVY7ySPiSo8 https://youtu.be/aVY7ySPiSo8 (never launched it). I used Svelte Flow to visualize AI doing research, my first project using LLMs.

huflungdung 11mo ago

[dead]

sroussey 11mo ago

I use this library for some in browser AI stuff. https://podley-web.netlify.app/ https://podley-web.netlify.app/

prvenkatesh 11mo ago

[dead]

anorak27 11mo ago

I made a desktop UI using react flow with resizing and deletion of windows. https://github.com/Anilturaga/Generative-UI https://github.com/Anilturaga/Generative-UI

danielfalbo 11mo ago

Supabase uses this for the Visual Schema Designer https://supabase.com/features/visual-schema-designer https://supabase.com/features/visual-schema-designer

quintu5 11mo ago

I’ve used this library on a couple of projects with great results. One, a drag-and-drop IaC builder and the other a GitHub Actions-like task execution graph viewer.

icemelt8 11mo ago

We use this for our flow builder in https://wetarseel.ai https://wetarseel.ai

deleted 11mo ago
[deleted]

aurareturn 11mo ago

Just what I was looking for a project.

artur_makly 11mo ago

I made https://VisualFlows.io https://VisualFlows.io with it - among many other AI powered canvases: https://www.design2dev.com/work/agentic-ai-canvases/ https://www.design2dev.com/work/agentic-ai-canvases/ Contact me for UX consulting if you need it -;) artur at design2dev.com

mediumsmart 11mo ago

I was tempted for a moment but I think it needs JavaScript