Preview would have a dynamic ID that maps to the source JSX.

  Failed to load resource: net::ERR_CERT_INVALID 4b99d2cfb81c64aed531.css:1
  Failed to load resource: net::ERR_CERT_INVALID cdn.utopia.app/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js:1

Same in Chrome and Safari

Other is that CSS can be shared between unrelated elements and cascading. FP and Dw worked pretty well for HTML where the looks of the elements were determined by their properties. Once CSS showed up they tried to adjust by encoding same things in inline styles of the elements. There was some support for css classes but it wasn't first class. You couldn't easily click to make a group of visual properties a style, name it (or choose a selector for it) and use it in other element somewhere on the page. The css classes are one thing, the other is 'cascading'. You couldn't do that conveniently either. So the moment you wanted to use the actual innovation that css brought to the table you had to pretty much drop into code and rarely ever come back to gui, which made visual part of FP and Dw obsolete.

And since you are dropping into editor you might want to drop into your favorite one where you have your own file tree, plugins and such. I think Utopia would make more sense if it could be run as a VSCode plugin.

To try to avoid that fate I think Utopia might consider some way of extracting those sliders on the right hand of UI out of specific component and into a shared group of styles. If you were working with CSS instead of css in js react-style the best idea would be to just mirror what css has, like named classes and complex selectors. And when you click a component you should let edit both inline component style and all the selectors that apply to it. It should basically mirror Chrome CSS inspector but in visual form with sliders and friendly names and other stuff. Since you are using React it would be best to mirror what React developers use to share styles between components. Some commentators here mentioned some libraries and solutions for sharing styles between components in React. But it doesn't look in Utopia it is as essential for survival since in React sharing styles by sharing whole components is a valid approach.

The other thing that made me abandon FP and Dw was that my HTML was generated server-side with a lot of PHP and parts of it kept in multiple files. You neatly address this using React and keeping it alive enough to populate the page you edit with state. React also enables composition of the page from components that can be edited separately which neatly resolves the issue of web page being spread over multiple files. I see that Utopia deals with editing components that include other component from different files neatly and it could be used flexibly to edit all the components however small and large and complex they are.

Other than that visual tools like that are great, both for people learning web development and people doing their work. I hope that Utopia thanks to your effort and power of React and its ecosystem will eventually becomes the standard way how people begin React project. Sort of like visual form of create-react-app.

It seems that any "logic" (conditionals, iterators, etc) in the components will prevent the component (and their children) from being inspectable.

Is the intent to keep it "no-code" in this respect (i.e. effectively a visual JSX editor), or will you be adding the ability to inspect more "dynamic" components to make it useful for app development?

[0]https://imgur.com/a/N82Zutz