Why I Made This
As part of the CoFrame System, we needed a visual programming environment embedded in the system. Critically, we wanted the environment to be tightly coupled with the behavior of the rest of CoFrame, which meant we wanted to be able to highlight critical blocks from other parts fo the interface, or to engage other aspects of the interface from within the VPE. The most commonly used tool for VPE’s is by far Blockly, but Blockly in particular had specific limitations in terms of the aforementioned interactivity, and also would have presented challenges in synchronizing the data between it and the rest of the interface, which in the worst case would have caused unnecessary and detrimental re-renders, and at worst could have caused infinite loops of parsing and encoding. Given these goals and challenges, I decided to construct a custom solution, which has since been spun off as a separate and standalone component for React. SimpleVP now has a number of useful affordances, such as highlighting, copy/paste, imperative or flow-based programming, custom callbacks, and more. The block information is provided to the system in the same way as the program data itself, meaning you can tweak the behavior of the blocks, just like you can modify the program data externally. For more information on SimpleVP, please check out the documentation in the Github, or check out the examples in the Storybook.