Get the top HN stories in your inbox every day.
moklick
technicolorwhat
Wow 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
I 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
high_byte
I 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
victorbojica
Looks cool. Looks similar to dynamo. https://dynamobim.org/
I'm curious if that's your inspiration.
robertlagrant
That's cool. It's a little like Apache Airflow's UI.
(Edit: is it Airflow?)
pdaddyo
I'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-0...
tomduncalf
This looks great, please share more if/when you can!
moklick
wow this looks really cool! Is it on Github?
hpen
Ah shit I just spent the weekend building a d3 node editor for my project... smh..
ertucetin
Does 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.
moklick
It's not built-in but you could implement it on your own. Here is a layouting example: https://reactflow.dev/examples/layouting/
adverbly
Seconding this. I'm a big fan of dagre due to its layouting. Curious if this can do the same...
moklick
In this example we are using dagre https://reactflow.dev/examples/layouting/ You can use the layouting engine of your choice. There is no built-in layouting.
erwinh
So cool to see these kinds of in my mind pretty advanced interactive interfaces become easily reusable modules to integrate with any kind of application.
normanrz
This is a great library. We have used it for a workflow report tool for our in-house Machine Learning pipeline (https://voxelytics.com). Rendering a DAG with some interactivity works very well.
moklick
Hey Norman :) nice that you are using react-flow! I will check out voxelytics. looks nice!
robertlagrant
Oh, wow. I remember when I was looking for something like this...
...last week. Hooray for HN!
bradtheappguy
I remember when I was looking for something like this... 2009. Oh well....
janaagaard
Pretty amazing that https://reactflow.dev/examples/ works so well on phone.
pabe
Does anyone know about something like this for Vue and Svelte? :)
lf-non
Butterfly [1] by alibaba has a vue wrapper (along with a React one) over a framework independent core.
It is not as well documented though.
leodriesch
Looks 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?
jfbaro
Looks amazing! Any plans on supporting React Native (RNW)? I couldn't find any mention of React Native on the github page.
emteycz
If you're using React Native Web you can import and use this normally, though of course it will be web only.
tenaciousDaniel
Never thought that animation would help the readability of sequence diagrams, but it totally makes sense. I love this.
Get the top HN stories in your inbox every day.
Hey. 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/