The only functionality I’m actually looking for is the ability to connect and disconnect elements using virtual cables (that flex and look good, just like those in rete). It’s for a software synth patchbay (like those used in the Reason digital audio workstation software). So, ultimately, even though this library is impressive, it isn’t quite the right fit for my project.
If anyone can recommend an alternative that focuses purely on cabling, I’d love to hear about it!
If you want to use it I am more then happy to help: https://github.com/fibo/flow-view
Currently I am working on a rewrite and I will use flow-view to create custom nodes, for example nodes that have a canvas or a graph inside (images a SinOsc node with a graphic preview). The engine is able to order nodes by level and run them usinng the graph order, it is not an event based engine but every graph compiles a JS function.
Thanks for the recommendation though. :)
Relatedly, what are your thoughts on Tone.js?
At present, the sequence of connections for each effect are pre-determined, but I'm working with the idea that a button will flip the synth around so you can patch the units in any order you wish. Another idea is to start with an empty rack and have you add them in and move them around however you wish too, so you could have more than one of each type in the chain. Very much still a work-in-progress!
I'm actually using Tone.js for this project. So far I'm finding it very useful.
Shameless plug: I built something similar as a part of my workflow platform for JVM (for Java and Clojure):
The main focus of my tool is enterprise integration and data processing, but I still love to play and experiment with the ideas of developing code directly in browser and how to visualize its execution flow.
So I built a live coding / visualization also as a part of my tool.
This becomes non-trivial if you apply it to languages other then js (so browser integration becomes a bit harder).
I also think the main challenge here is the server-side part of things, especially when you make such solution distributed - i.e. how you achieve high availability and assure everything gets executed (at least) once even in case of failover, how you cater for multitenancy while achieving sufficient security/isolation between users etc.
More specifically, you still write code and you visually connect pieces of code together. Think "pipelines of transformations" in a functional programming way. Then you click "deploy" and have it all running on AWS Lambda with rich logging and other goodies.
A lot my inspiration comes from being a former game dev who has used Scratch and UE4's Blueprint engine. I've personally found that it's difficult to get the abstraction right in a way that keeps complexity in check (as others in this thread have commented). That's why you still write code in Refinery -- you're just visually chaining microservice calls.
Would love to hear feedback + thoughts, if anybody is interested in sharing. free at refinery.io is a good email for me. :)
I'm super interested in what folks want to use this for?
I would like to see more apps for tablets that introduce visual programming into everyday workflows. If you haven't seen the work of Ink & Switch check out these essays on end user programming  and an app for basically working on ideas , combine these and you get a fluid interface with an easy way of doing some computation (the visual programming bit) which is something I would love to use.
But visual programming gets messy if you attempt to do something complex and I don't know if there is any way around this. This then is where there needs to be programs with strong types that can compose with each other, like the example explained in this post .
These concepts are all things which anyone using a computer could use, not something just resticted to people who are already "developers", and I think we have to get into that mindset for this type of software to become more successful.
I like the idea of having programs structured as "producer" and "consumer" nodes, with nodes being as close to pure functions as possible. But it seems like the graphical representation indeed gets in the way.
Perhaps the idea could still work without the visualization part? Each node a single file, listing inputs (maybe some sinks too) at the top. Still a graph, but users wouldn't _necesarily_ need to visualize it all the time.
Visual programming works very well when you have data flowing, but it doesnt work when you have loops and branching. But it is nice to support graphs for some tasks, it really speeds up some processes.
We managed to make visual programming work well with loops  and more or less OK with branching . The trick is to look at loops from a functional perspective (i.e. as iter/map), rather than from imperative.
The dual problem is that flowcharts (in the traditional, control-flow-only sense) cannot show fork-join parallelism or fixed point constructions, while both are readily expressible by data flow.
I think tools like xState gets this right, you can glance the package listing here: https://github.com/davidkpiano/xstate/tree/master/packages
Then you just include core + framework X integration, and if you need a new integration, you create it new and use it together with core.
It's from Microsoft, with flavors for Mincraft and Legostorm too, https://www.microsoft.com/en-us/makecode .
It's, of course, not an entire ecosystem for everything, but they do a lot of visual things that may be worth evaluating. I like the colors/shapes of the code pieces, and the ability to switch between the visual code editor and the plain js.
I've found mermaid (and vue-mermaid) useful for just the workflow representation as the diagrams are compact, though the lines don't curve like in other libraries
I tried it in the dev consolve, on this page: https://rete.js.org/#/components
The exported object has properties id (string) and nodes (array). Each node is shaped like:
Not answering you question directly, but it’s a way of doing something similar.
A whole set of enterprise tools do things like this, and I’ve worked a bit with bpm workflow engines that kind of does this in a standardized way.
> BPMN models are expressed by simple diagrams constructed from a limited set of graphical elements. For both business users and developers, they simplify understanding of business activities' flow and process. BPMN's four basic element categories are:
- Flow objects: Events, activities, gateways
- Connecting objects: Sequence flow, message flow, association
- Swim lanes: Pool, lane
- Artifacts: Data object, group, annotation
You can use web tools to draw processes and, execute them on a
Camunda comes to mind, as an open source alternative, but if nodejs is your thing there a a couple of BPM engines in the works, eg:
As with anything graphical based - if it doesn't fit the purpose exactly, it will become a pain in the end.
Tangential to this - Netflix made Conductor as a kind of in-house workflow engine, and uber built Cadence, if you want more codified control.
Wheels keep getting re-invented! :)
(Edit - I mean something more like nodes.io)
(Disclaimer: I'm the creator and project lead of Node-Red)
It helped me both rapidly prototype things and learn UE4 design patterns / practices. Some of the core functionality and perf related things I'll bang out in cpp but for most things I stick to blueprints.