React Flow Blog

Built this last night and fixed a bug today. It's a proof-of-concept of how to render network graphs with Zed's (https://zed.dev/blog/gpui-2-on-preview) gpui library. I plan to turn this into a more general purpose component library somewhat following the style/API of Reactflow (https://reactflow.dev) and Sigma.js (https://www.sigmajs.org/)

Yes! https://reactflow.dev/ is what I’ve been using, has been great.

> Vue 3 is great, I highly recommend reacty-folks or frontend devs try it. We wanted the larger ecosystem (and boo to us for not being brave enough to support the growing vuecosystem). I enjoy Vue 3 and I don't enjoy React, but like you this is the reason I keep heading back to React. From tldraw [1] to react-flow [2] to the superb AtlasKit [3] to form builders & validators, the React ecosystem contains great stuff that isn't available off-the-shelf for other frameworks. 1. https://www.tldraw.dev/ 2. https://reactflow.dev/ 3. https://atlaskit.atlassian.com/ (seriously, table handling in the RTE is excellent)

First thing I noticed was the awesome node ui and went to your package.json to see what library you used... nope, you made your own, lol. Awesome! I've been looking for a good react/js node-graph library with a lot of customization around nodes/edges and good hierarchical auto-layout and the best I've found so far is https://reactflow.dev/ but some of the features I need are behind a pro-license. I hadn't considered trying to write my own, it doesn't seem like a trivial task, lol. Anyway, awesome work on this app!

Hey! this is Moritz. one of the creators of datablocks. the project is in a very early stage and more like a showcase right now. If you have any feedback, please let me know :) It's very valuable for us. We open sourced the underlying library for creating the flows. It's called react flow https://reactflow.dev/. The backend is built with nhost and we can really recommend it -> https://nhost.io/! Thanks for the nice words here :)

Also worth looking at ReactFlow (https://reactflow.dev) if you are looking for this type of tool.

I really hope that functional programming and property-based testing [1][2] get taken seriously by real engineers who understand that it is important to know and understand what the program is doing. Something LLMs by their very nature cannot do. I was writing a React application at work based on React Flow[3] and I was mucking about with state management libraries (because that's what the React Flow manual recommends). Maybe it was a skill issue on my part, but I had a hard time with the Zustand library. Then I read up on reducers in React and everything was perfectly clear. A reducer is just a pure function, it takes an existing state and an action and returns the new state. That's simple, I can wrap my brain around that. Plus, I know how to test a pure function, there is nothing to mock, stub or wrap. States and actions are just plain JavaScript objects, there is no history, no side effects, no executable code. And this is where property-based testing comes in: if history does not matter it means I can randomly generate any valid state and any valid action, then apply the reducer function and verify that the resulting state has all the required properties. Only a formal proof would give me more certainty. I fully understand people who want to use LLMs to write tests for them. Writing test cases is boring and tedious. There are many edge cases a human might miss. But relying on a guessing machine and praying it does not write nonsense is just plain irresponsible for…

Used the amazing https://reactflow.dev <3

> If you need to do CSR, use Solid or Vue, but don't do React. Easier said than done. There're still many high quality libs for React that are not available for vanilla JS or other frameworks. E.g. https://reactflow.dev/ (yes, they have a Svelte version, but not as feature rich). Vue comes very close, though.

Based on screenshots that looks like dearimgui. You can see similar widgets here: https://github.com/TimoSalomaki/awesome-dear-imgui Edit: I’m wrong, it’s actually React Flow! https://github.com/FrameOS/frameos/blob/037af53e94a3b47ce5df76ed2b0e1c… https://reactflow.dev/

Vueflow (https://vueflow.dev/) React flow (https://reactflow.dev/)

Most diagramming solutions are like freehand drawing tools. Besides text-based diagrammers (Mermaid, PlantUML, D2Lang) what are good diagramming components for integration in a web front-end that help with strict, validated diagramming? Restricted tool pallet shapes and commands. I.e. defining that a "Concept Map" only has Concepts and Relationships, where the latter must be connecting 2 concepts for the diagram to be valid. Or an "Event Storming" diagram that only has the appropriate sticky note types that must be layed out appropriately on a timeline. Bonus points for supporting collaborative editing. React Flow [0] until now is the component that's closest to this. Others, Excalidraw [1] and Tldraw [2] may be integrated to support this, with some additional effort. [0] https://reactflow.dev [1] https://excalidraw.com [2] https://tldraw.com

Several out there. Pick your poison https://vueflow.dev/ or https://reactflow.dev/

Here is a similar Thin-Crust Open Core model https://reactflow.dev/blog/asking-for-money-for-open-source/. But I hear CH and understand their move. I think OSS Sponsorship has failed; it does not generate enough money to pay a team of top engineers. The best move would have been to implement better paid support model and allow more users to pay for support. Currently CH charges immense amount for their support, so only large corporations could afford.

Well sure, there are a lot of different options. But I wanted to pick a toolkit where there were already a lot of UI components available and I would haven't to hand roll a lot of them manually. For instance, my UI contains a node graph. Since I was using Electron I could simply use react-flow [0]. As part of my research I also implemented node graphs in both imgui and Qt and, while certainly possible, it is a lot of work to get all the interaction nuances right. The main drawback of using Electron was having to do a lot of interop work, of course, but as long as I was mostly working on the UI side I had all the benefits of hot reloading, existing design systems to pick and choose (I ultimately picked Mantine [1]), etc. [0] https://reactflow.dev/ [1] https://mantine.dev/

Hey! The visuals are all via https://reactflow.dev/, which has been pretty awesome to use.

Nope this is not open source, but the flow interface is made with react-flow which is https://reactflow.dev/

We’ve rolled our own but https://reactflow.dev is pretty neat and OSS.

If you're on React these days ReactFlow (https://reactflow.dev) is good for this.

Good question. You are right in that it is implemented as a mapping from type → SVG in the Markdoc docs site. However, diagrams don't need to be implemented this way. In fact, on stripe.com/docs we use Markdoc + https://reactflow.dev to render custom diagrams (with translated content and everything). There is a good example of this in action on https://stripe.com/docs/payments/checkout/how-checkout-works, if you are curious.

These look relevant if anyone is interested in developing node based tools with react https://reactflow.dev https://flume.dev

Pretty amazing that https://reactflow.dev/examples/ works so well on phone.

Thanks! I'm using plain React. I have a React onMouseDown React listener that attaches mousemove/mouseup listeners on the window. I round the numbers to the grid. I've seen https://reactflow.dev/ but haven't used it myself. The core drag interaction is not much code but feel free to reach out on twitter. happy to share more!

I think they developed their own react library for this. https://reactflow.dev/

I think this is the standard: https://reactflow.dev/

Should be https://reactflow.dev

The React Flow library has free documentation, but more extensive tutorials on how to use their library are part of their paid offering. (More about their model here: https://reactflow.dev/blog/asking-for-money-for-open-source/ .)

Assuming its open source, a recent HN post on this: https://reactflow.dev/blog/asking-for-money-for-open-source/

It's in a lot of content creation tools already. https://saturncloud.io/blog/what-is-a-graph-autolayout-algorithm/ https://github.com/microsoft/automatic-graph-layout https://github.com/kevtiq/digl https://www.mindfusion.eu/graph-layout.html https://reactflow.dev/docs/examples/layout/auto-layout/ What do you think 'tensor-based learning' or 'training data' would do for graph layout?