8 ms·
Show HN: React Flow – library for creating node based editors and apps
- erwinh 5y agoSo cool to see these kinds of in my mind pretty advanced interactive interfaces become easily reusable modules to integrate with any kind of application.
- allanmacgregor 5y agothis is awesome and it has been a "blocker" on app I been wanting to build for a while
- larzang 5y agoNeat project, awful name. Overloading Flow, an already important part of the React ecosystem, just makes it harder to both find information about your project and find information about Flow.
- jakelazaroff 5y agoIs anyone even still using Flow? Almost every React project I see is in either vanilla JS or TypeScript.
- bpierre 5y agoReact is :) https://github.com/facebook/react/ https://github.com/facebook/react/
- TechBro8615 5y agoAFAICT at this point it's basically just Facebook projects (since they use it internally) and some older libraries that pre-date TypeScript popularity. I'm not sure there is much reason to choose Flow over TypeScript for a new project in 2021.
- deleted 5y ago[deleted]
- inbx0 5y agoYes, there's an active albeit small community there. I don't think I'd recommend it over TS for a new project by default, unless the person has some specific pain points with TS that Flow would fix. But Flow does still have some neat features - exact types, nominal types, explicit strict variance rules etc. - and performance benefits in large projects that could make one choose it over TS. And they have been streadily improving stuff like editor support, even though admittedly it's still a long long way behind TS.
- qudat 5y ago> and performance benefits in large projects that could make one choose it over TS [citation needed] A medium size app using Flow would take 10 seconds to type check in an IDE. It's possible we had some issues with circular dependencies but Flow was such a burden to deal with. Not to mention issues where the flow server would chew CPU resources on a dev machine. Typescript on a much much larger project has had zero issues with performance.
- inbx0 5y ago> [citation needed] I don't have anything but own anecdotial evidence to provide. Would be cool if there were some good, recent benchmarks between the two, but I wasn't able to find any. Maybe I've just configured something wrong, but I keep facing this issue where autocomplete stops to think suggestions and might just freeze the whole VSCode for a second. This is in a small project that has some fairly large library definition files (namely, aws-sdk). If you search for "TypeScript performance", you'll find a bunch of issues and posts discussing the subject, so I don't think I'm totally alone in calling it out. Granted, Flow gets it's share of similar search results and I have also experienced similar issues where a recheck sometimes takes long and CPU usage jumps very high. This side of Flow has been consistently improving between almost every release, though. Most recently, a couple months back, their switch to this new "types-first" architecture [1] is supposedly unlocking something like 50%-90% perf improvements compared to what they vere before. My point with this isn't to question your experience with Flow, I've sometimes faced similar issues. I'm just saying that, depending on the Flow version you were using, things may have changed a lot for the better. Just so that I'm not talking _completely_ out of my ass here, as a quick very unscientific test I cloned the Tutanota project's repo [2]. SCC says there's 967 JS files, consisting of 205433 lines of code in there. Flow version is 0.136, which is a little behind, but they are using the new types first mode. time node_modules/.bin/flow check Found 0 errors node_modules/.bin/flow check 1,00s user 0,11s system 9% cpu 11,905 total [1] https://medium.com/flow-type/types-first-a-scalable-new-architecture-for-flow-3d8c7ba1d4eb https://medium.com/flow-type/types-first-a-scalable-new-arch... [2] https://github.com/tutao/tutanota https://github.com/tutao/tutanota
- ybbond 5y agosome company with overflowing features from products that needs to have typecheck but very limited in time, and/or already complicated repository(es). yes
- danlugo92 5y agoLet flow die already.
- xavierlint 5y ago> React Flow enables you to build node-based applications Also "node-based" doesn't mean the usual run-javascript-in-backend node, but the diagram nodes.
- chrisweekly 5y agoYikes; alternate uses for _two_ already-overloaded terms ("flow" and "node") in the tagline? Naming things isn't _that_ hard. Less of a nitpick and more of a red flag wrt wisdom and experience of the lib's authors.
- shakow 5y ago> and "node" “Node-based interface” is common for that kind of UI though, the author didn't invent it. It's a shame that NodeJS chose such a common word as its name, but “node” can't be erased from CS just because NodeJS exists (one would have to remove graph theory, cluster grapes, many UIs concepts [tree UI, nodes UI, ...], many 3D jargon, etc.).
- httgp 5y agoI think it will be constructive if you can provide the authors some alternative terms they could use instead.
- sosuke 5y agoReact Pathfinder!
- jfbaro 5y agoLooks amazing! Any plans on supporting React Native (RNW)? I couldn't find any mention of React Native on the github page.
- emteycz 5y agoIf you're using React Native Web you can import and use this normally, though of course it will be web only.
- andretti1977 5y agoBeautiful library
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- moklick 5y agothanks!
- tekstar 5y agoPerfect in at least 3 separate places for my current project, a multiplayer audio sequencing/synthesis environment. Thank you
- moklick 5y agoNice! Someone built a synth with React Flow: https://github.com/SubZtep/synth https://github.com/SubZtep/synth
- pabe 5y agoDoes anyone know about something like this for Vue and Svelte? :)
- lf-non 5y agoButterfly [1] by alibaba has a vue wrapper (along with a React one) over a framework independent core. It is not as well documented though. [1] https://github.com/alibaba/butterfly https://github.com/alibaba/butterfly
- tenaciousDaniel 5y agoNever thought that animation would help the readability of sequence diagrams, but it totally makes sense. I love this.
- moklick 5y agoHey. I am the maintainer of React Flow. Thanks for the kind words here :) We built it as a foundation for our node-based data wrangling tool datablocks https://datablocks.pro/ https://datablocks.pro/
- technicolorwhat 5y agoWow I really like it! Can you maybe break down some of the design decisions you've made building this? I'm especially interested in choosing full svg, svg for just the lines and the rest with divs or using canvas. Also I see you depend on d3, where do you use it for?
- moklick 5y agoI did a lot of data visualizations and I am big fan of d3. It's very robust software that works in all browsers. We are using d3-zoom for panning and zooming the pan but I am actually looking for an alternative to decrease the size of react flow. Maybe we will use this in the future https://github.com/anvaka/panzoom https://github.com/anvaka/panzoom
- high_byte 5y agoI also wondered why mix divs and svg rather than doing it all in SVG? or all in HTML? although it seems to position and resize just fine
- robertlagrant 5y agoThat's cool. It's a little like Apache Airflow's UI. (Edit: is it Airflow?)
- victorbojica 5y agoLooks cool. Looks similar to dynamo. https://dynamobim.org/ https://dynamobim.org/ I'm curious if that's your inspiration.
- misnome 5y agoThis is really, really impressive. Nice clear, and good looking examples, looks to have clear documentation, and nice informative README. I've been tossing some ideas around about using node-based editor flows for some of our work, will definitely be giving this a try.
- fouric 5y agoAs a non-JavaScript developer, I'm curious as to where the "magic" (things that aren't intuitive to implement) is. The algorithm for drawing an edge between nodes, for instance, doesn't seem magical (just a spline or beizer curve) - but only because the library doesn't care about routing edges around nodes. Layout isn't magical because you're doing it manually - unlike graphviz/xdot, for instance. Does this library have magic, or is it, instead, the product of a lot of elbow-grease? If it was the latter, I'm not going to complain - I'll take a pre-written library over doing it myself in a heartbeat - but, as I'm not a web developer, I wonder if I'm missing something, and it's interesting for me to taxonomize things.
- moklick 5y agono magic involved ;)
- janaagaard 5y agoPretty amazing that https://reactflow.dev/examples/ https://reactflow.dev/examples/ works so well on phone.
- tracardi 5y agoDoes React flow support ports?
- unixhero 5y agoBret Victor ought to be cheering here.
- h1fra 5y agoAmazing, I was just looking at a library like that, good timing
- pdaddyo 5y agoI've been using this the last few weeks on a synthesizer side project and it's been absolutely fantastic. A well designed API and easy to customise, excellent docs and sane defaults. Bravo! https://dl.dropbox.com/s/kxlzlqypn0nz8bw/Screenshot%202021-04-18%20at%2018.26.37.png https://dl.dropbox.com/s/kxlzlqypn0nz8bw/Screenshot%202021-0...
- moklick 5y agowow this looks really cool! Is it on Github?
- tomduncalf 5y agoThis looks great, please share more if/when you can!
- normanrz 5y agoThis is a great library. We have used it for a workflow report tool for our in-house Machine Learning pipeline (https://voxelytics.com https://voxelytics.com). Rendering a DAG with some interactivity works very well.
- moklick 5y agoHey Norman :) nice that you are using react-flow! I will check out voxelytics. looks nice!
- jcadam 5y agoNice. Wish I'd known about this months ago :)
- hpen 5y agoAh shit I just spent the weekend building a d3 node editor for my project... smh..
- girriPal 5y agoBeen using this for a while and have found it a good fit. The documentation and examples are spot-on. One feature I wish it had would be the ability to more easily convert the flowchart to a png.
- robertlagrant 5y agoOh, wow. I remember when I was looking for something like this... ...last week. Hooray for HN!
- bradtheappguy 5y agoI remember when I was looking for something like this... 2009. Oh well....
- ertucetin 5y agoDoes it support auto positioning like in MindMaps? e.g. everytime I hit `tab` I get sub node then I hit several times let's say I have 10 sub nodes now, auto positioned.
- adverbly 5y agoSeconding this. I'm a big fan of dagre due to its layouting. Curious if this can do the same...
- moklick 5y agoIn this example we are using dagre https://reactflow.dev/examples/layouting/ https://reactflow.dev/examples/layouting/ You can use the layouting engine of your choice. There is no built-in layouting.
- moklick 5y agoIt's not built-in but you could implement it on your own. Here is a layouting example: https://reactflow.dev/examples/layouting/ https://reactflow.dev/examples/layouting/
- leodriesch 5y agoLooks awesome, have you thought about making it an actual React renderer (like react-three-fiber) instead of passing an array of elements to the component?
- amcdnl 5y agoMortiz does some awesome stuff. I built a similar project called reaflow ( https://reaflow.dev/ https://reaflow.dev/ ) which handles some more complicated cases around nesting and layout.
- FractalHQ 5y agoIs there a vanilla version so I can use this with Svelte