Quality of life improvements to code-flow-canvas

May 12, 2024

I’ve made some very nice UX improvements to the visual programming system that I am working on: it’s now possible to replace a node with compatible node-types without hassle. When a node is selected, compatible node-types are shown in a dropdown. This helps especially when doing more creative work when creating a shader/gl flow for example and getting more feeling on what the impact is of certain mathematical operations (in the video I change a multiply node to an arctan calculation).

Another improvement is being able to insert a node into an existing connection.. also taking compatibility into account. This speeds up the creation process of flows in general.

Under the hood I’ve also made a nice improvement: I can now use jsx components using vanilla DOM without the use of react or other libraries. This is a nice DX improvement when developing my project.

The video can be found on my youtube channel.