Very cool! I'm stongly in the TikZ camp for creating vector diagrams, but with tools like this, SVG is starting to look very attractive...

link to demo: http://ravichugh.github.io/sketch-n-sketch/releases/index.ht... (click on v0.4 link)

I'm immediately reminded of Bret Victors work: http://worrydream.com/#!/LearnableProgramming

I hope this is really the future

Great resource, thanks for sharing this!

For me, transparent meaning is far easier for understanding systems than, for example, visual programming (I'm thinking the Unreal Blueprint[1] system)

[1]: https://docs.unrealengine.com/latest/INT/Engine/Blueprints/i...

The 2 minute primer and motivation: https://www.youtube.com/watch?v=rskUgwq5N2A

Yes, it does remind me of Bret Victor's work. Seamlessly moving between coding and manual modes is really cool. I think it requires learning a new LISP like programming language called little.

For those short on time, skipping through the videos helped me understand why this is cool pretty quickly.

http://ravichugh.github.io/sketch-n-sketch/blog/03-user-stud...

Great concept. The text editor is broken for me (I place the caret, then try to type, and it only works half the time and jumps around to other spots the other half of the time without inputting any text). Also, I'd like to see results directly, à la CSS editor in Chrome devtools rather than having to run the code.

It's broken for me too. When I try to type, it places the cursor at the top of the code, no matter what I try.

You have to switch between "Run code" and "Edit code".

I see. That's what I get for going straight to the demo without checking the documentation.

To be honest, I think clicking on the left or right window should automatically switch between these modes.

This is neat. It reminds me a lot of WebCode for the Mac, which has a real-time SVG mode.

http://www.webcodeapp.com/

This is pretty cool and I definitely think direct manipulation is essential to learnable programming.

That being said, direct manipulation should ideally work both ways: it's awesome that changes to the image update the code in real time, but code updates should also instantly update the image. The "run code" workflow is very clunky, especially when popular tools in production today actually do hot code reloading.

it's just a IDE for a programmatic manipulation. Nothing else.

the very thing they show on the 1st video as a flaw of the old approach (run script, then delete some random nodes) still can't happen on their solution.

Liked it. Reminded me of CMU's Andrew project from, egad, decades ago.