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.

If you have any questions or feedback, feel free to reach out to me here: [email protected]