Hi everyone, here is a recording of a data-first design tool I demoed during last future of code meetup. https://twitter.com/jvuillermet/status/1645862317597380616 Next, I would like to explore how to improve the formula input/editor. I think there is an opportunity for more structured editing while adding playfulness and intermediate value preview. I like those 2 directions so far: • https://www.adacraft.org/ from Nicolas Decoster • direct programming from Jonathan Edwards https://vimeo.com/274771188 Any other idea or reference in that space?

you may want to check https://charticulator.com/

wow really relevant indeed, thanks! I didn’t know about it this looks like a nice source to see a lot of examples . As well as some inspirations for things to try to implement

Love the pattern of going from data to repeated UI elements, and the Union of formulas with a constraint editor! You may also like: https://www.cs.cmu.edu/~shihpinc/gneiss.html and the demo video from Adobe that is related to the charticulator team, project Lincoln https://blog.adobe.com/en/publish/2018/01/03/peek-behind-sneaks-projectlincoln-super-powered-data-visualization

yes Gneiss is really nice and inspired me to have the full json and data browser on the left. In my opinion, the missing part of Gneiss is that the components are the end of the road. In my prototype or something like retool, the visual components also expose their data so we can keep building on top. An interesting and unexpected reinforcing loop I didn’t know about project Lincoln, that’s amazing! thanks a lot. I need to spend more time on the video to better understand how it works

I assume you may have seen it already, but just in case, sketch n sketch and Hazel livelit are structured editors for graphical pilot programming https://ravichugh.github.io/sketch-n-sketch/

also https://cuttle.xyz/

perfect, thanks! that’s some material to study 😛 Anything in the structured editing like the 2 last links of the post that come to mind? Something better than just text to edit formulas

yes, tyler https://liveprog.org/live-2021/Restructuring-Structure-Editing/

Very interesting demo! I like the discoverabilty, the contraints between visual elements, the way you map arrays on visuals, etc.

This is very cool.

I completely missed that sorry! Very cool indeed. using

in1

local variable is interesting. I didn’t think about it. The vertical flow also seems to help with previewing intermediate values more easily but that probably require quite a lot of space