Live data from Hacker News

React-flow: a library to create interactive node-based graphs

webkid.io

11–20 of 20 posts

Re: React-flow: a library to create interactive node-based graphs

#11
There are few similar libraries. I think most feature reach is https://github.com/projectstorm/react-diagrams , but there is also https://github.com/DrummerHead/react-flow-diagram https://github.com/alibaba/GGEditor , actually I’ve found about 15 different js open source react and non-react editors for node-based UI. But unfortunately most of them is not very extensible. One of the reason is that the authors prefer to store state inside component, so it’s impossible to create non-trivial behaviour.

Re: React-flow: a library to create interactive node-based graphs

#12
post #11

There are few similar libraries. I think most feature reach is https://github.com/projectstorm/react-diagrams , but there is also https://github.com/DrummerHead/react-flow-diagram https://github.com/alibaba/GGEditor , actually I’ve found about 15 different js open source react and non-react editors for node-based UI. But unfortunately most of them is not very extensible. One of the reason is that the authors prefer t…

That's why we tried to make this library as simple as possible. It doesn't do any state updates besides the positions. You can easily store state inside nodes and change it as seen in the custom node example https://react-flow.netlify.app/custom-node

Re: React-flow: a library to create interactive node-based graphs

#13
post #12
post #11

There are few similar libraries. I think most feature reach is https://github.com/projectstorm/react-diagrams , but there is also https://github.com/DrummerHead/react-flow-diagram https://github.com/alibaba/GGEditor , actually I’ve found about 15 different js open source react and non-react editors for node-based UI. But unfortunately most of them is not very extensible. One of the reason is that the authors prefer t…

That's why we tried to make this library as simple as possible. It doesn't do any state updates besides the positions. You can easily store state inside nodes and change it as seen in the custom node example https://react-flow.netlify.app/custom-node

One thing that seems to be missing though is slot names.

For example if the nodes are objects in C++ and the edges are relations, you want to know the names of the members that point to the other nodes.

Labels on the edges would also be nice.

Re: React-flow: a library to create interactive node-based graphs

#15
post #11

There are few similar libraries. I think most feature reach is https://github.com/projectstorm/react-diagrams , but there is also https://github.com/DrummerHead/react-flow-diagram https://github.com/alibaba/GGEditor , actually I’ve found about 15 different js open source react and non-react editors for node-based UI. But unfortunately most of them is not very extensible. One of the reason is that the authors prefer t…

What sort of non-trivial behaviour would you be interested in?

Re: React-flow: a library to create interactive node-based graphs

#16
post #5

Can somebody explain to me how/what this tool is used for? I have an idea but im not quite sure

I made a similar (though less complex version) of this for tech trees.

https://ldd.github.io/react-tech-tree/#examples

So the answer is, to make games!

I used it my library for my own game here:

https://ldd.itch.io/nu

Re: React-flow: a library to create interactive node-based graphs

#17
post #5

Can somebody explain to me how/what this tool is used for? I have an idea but im not quite sure

You could build a WebAudio synth / node chain with this, it's much better than looking at code.

Or set up CI pipeline with this.

Or in cases when you want end users to set up flows, but they can't code.

Re: React-flow: a library to create interactive node-based graphs

#19
post #15
post #11

There are few similar libraries. I think most feature reach is https://github.com/projectstorm/react-diagrams , but there is also https://github.com/DrummerHead/react-flow-diagram https://github.com/alibaba/GGEditor , actually I’ve found about 15 different js open source react and non-react editors for node-based UI. But unfortunately most of them is not very extensible. One of the reason is that the authors prefer t…

What sort of non-trivial behaviour would you be interested in?

For example: can I connect one port of node to other port of node and how this connection needs to be drawn.
Post reply on HN