invent-framework / invent

Express yourself with code.
https://invent-framework.github.io/
Apache License 2.0
108 stars 12 forks source link

Code editor (from blocks to text and back again) #74

Open ntoll opened 1 month ago

ntoll commented 1 month ago

An important aspect of Invent is the notion of a journey - from beginner to advanced. Part of this journey is how the tooling reveals the movement from beginner to advanced user. When it comes to writing code we need to help folks find their level from blocks -> text based coding. An old project I was once adjacent to did this very well (as part of the micro:bit project). CodeKingdoms allowed you to drag-and-drop blocks to create your program, but at the same time, along the bottom of the code/block viewer was a sort of slider/step selector where the left hand side was basic blocks and the right hand side was text editing, with intermediate steps between. I really like this pattern as a signalling and movement capability. We should do something similar and appropriate for Invent.

You can see it in action here:

Image