The team behind React Flow, an open source library for node-based UIs, writes about releases, funding and related projects.
Commenters praise React Flow as a good, customizable node-graph library that they use and recommend for building node-based interfaces.
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…
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
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/
> 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!
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.