rheeseyb

At the very high level, yeah that's pretty much what's happening. We generate IDs that we map to each of the elements statically and that we inject into the DOM so that we can capture metadata about the element. We're currently writing an in-depth explanation of how this all works, which will be uploaded on our blog in the very near future.

Helping people learn to code is something that we're very keen to achieve with Utopia.

Bret Victor is our idol! I didn't even have to click the video to know exactly which one you were talking about :)

Is this still the case for you? I don't believe we've seen this issue from anyone else, so I'm wondering if it was a blip or something more insidious

Thank you for taking the time to write this!

Wrt the VS Code plugin, it was an idea we were toying with. Ultimately we decided to go with a standalone editor because we didn't want to limit our market and run the risks involved with coupling our existence to them. That being said, a VS Code plugin is absolutely in our future and something we would want.

You're absolutely right that by targeting React we are mitigating some of those issues you've mentioned, but they are still issues that we still need to address, so we do need to adjust or introduce further tooling. All of these things are on our roadmap, but we're a small team so it's a case of prioritising, which is where comments like this come in to play as they help us add weight to those priorities.

We've got a long way to go, but thoughtful and constructive comments like these help us immensely along the way :)

That's absolutely true for sure, and I'd go so far as to argue that it's one of (if not the) primary driving forces behind development tooling decisions. Whereas some changes are well suited to e.g. unit testing (and where a passing suite of tests provides that instant feedback), when working on the design or interactions of an interface it's very important to actually "see" and/or play with the result of each minor tweak, so the faster you can make that loop the more pleasurable the development experience will be.

That's exactly our aim - if making a change via the canvas or inspector doesn't result in production grade code then the tool is failing in our eyes. We're well aware that there are parts where we're not hitting the mark there (effectively we're in an alpha stage here), but we're working hard to improve that.

Our goal isn't a no-code tool, but rather an editor that provides the tools for both developers and designers. We're iteratively improving the level of complexity of code that we can fully parse and expose to the rest of the editor, so you can expect these kinds of cases to become fewer and far between over time.

If you do have specific cases that you come across and are interested in following the development or just want to let us know of them, please do file an issue on our GitHub repo.

Hmmm that's incredibly frustrating. I'm trying to reproduce this but failing. Are you able to do this every time? If so is there any chance you could take a screen recording please to help us debug it?

This is ultimately one of our goals, to allow maintainers of those kinds of libraries to publish that kind of integration, or for us or even other users to provide it (thinking along similar lines to TypeScript type definition files)

> How would you hydrate the app with data while you dev?

This is precisely what the scenes are for in the storyboard.js file - it allows you to create multiple scenes that render your components with different data / props.

There is indeed some messing around required, but some of our team are developing this using M1 macs

Yeah we wanted to go the open source route from the beginning. The thinking was that it would help us build a community with meaningful relationships with our users (or at least the ones that get annoyed enough to log bugs or even contribute), but also most of our favourite tools are open source.

We had this question earlier in a reddit submission so copying and pasting the answer here (so that you don't think I'm being insincere!) - We fully support styledComponents, or any valid React for that matter. You can even use utility CSS classes in code. The design tool can edit some of these today already (e.g. you can pass in additional styles to a component instance). Better support for creating and managing styledComponents / Emotion is high on our roadmap so watch this space!