Yes, the time has finally come! I'll share a link to my visual programming project online! I've been mainly showing some video's on the devlog channel about the project.
Warning upfront: Although I've been working on this for quite some time (I even started from the ground up last year after working on my previous visual programming project for multiple years).. there's still a lot of work to be done and bugs to be fixed. The UI/UX is far from perfect but it is demo-able enough I think. However, it's still just in "demo-stage" and not usable by other projects (I haven't build any npm packages for integrating or vs-code extension for example).
My goal is to make a generic visual programming system (VPS) with which domain or application specific vpl's can be made. For now I am implementing 2 vpl's on top of the current base: a flow-based-programming inspired system and a "visual shader-toy".
Since the tool is an infinite canvas, you can zoom and drag the canvas using mouse/wheel/touchpad. I've spend some time getting touchscreen support, but more work definitely needs to be done there.
When you open up one of the editors, you can use the dropdown in the top-menu to load an example flow.
Without further ado, here's the link: codeflowcanvas.io : there are 2 demo playgrounds in which you can play around.
I'll post some more details in the 🧵.
Thanks for some feedback!
My VPS is build using vanilla javascript which makes it pretty small.. 100KB gzipped and minified (which will only grow in the future I expect, although I want to try and keep the core small). It currently runs only in the browser without any backend. The flow json data is stored in indexeddb storage. So when the browser gets refeshed it's loaded from there (storage happens automatically).
The flow json can be exported and loaded back.
The core VPS has support for composite nodes which contain a flow themselves and these can be nested and place multiple times on the canvas. This provides more flexibility then just grouping nodes in a group.
There's also support for containers, which are groups of nodes but in a container which is visible on the canvas. These containers can have different implementations like a state machine in the flow-based flow engine or a for-node or condition-node in the gl-flow (in the examples this can be seen).
The flow-based-programming inspired engine shows the program counter flowing through the flow when it gets executed (this is not available in the gl-flow). This is especially fun to watch in the quicksort-example flow because it has parallel paths and recursion (speed can be varied). You can use the timeline slider after the flow has run to do basic time-travelling.