DEV Community

Cover image for Code as Visual Component

Posted on

Code as Visual Component

This is the first post of a series to come on Code as Visual Component (NOT Yet Another Visual Programming Language ;)).

After 2 years of research on DX (Developer's eXperience) I'm now sure of the proof of concept for a new Visual Code Design concept. Personal motivations are :

  • I wanted to keep a dev journal while training on the jobs. I don't want to lose time and write much "literature" and it is not precise enough, I want to "picture" code with all its context. Git versioning is mandatory but as for getting a mental model it's not appealing enough.

  • I don't like all the Visual Programming Languages currently : they oblige you to code in a language I have to learn. I want to be able to use all mainstraim and not so mainstream languages (from javascript,...) or frameworks (react,...).

  • I want to capitalize on code by creating code as component or block, a bit like in scratch but for adults. I want to be able to create them quickly and visually so I chose figma platform.

  • I don't want to use drag & drop, it's not very productive, I want to type instead. I want to be able to use it as a complement or integrate with an IDE to be more productive and have clean code by capitalizing with a code knowledge management system.

  • and many more (student and teacher/self-taught to be able to customize and build visual tool and playground thanks to a plugin architecture).

Below is a very simple example of a component to select a node in figma as I'm eating my own dog food as self validation first. But as soon as possible (once I have fixed some pesky details), you'll be able to test also (join more than 1000 subscribers at

Long term I intend to opensource.

Discussion (0)