Scapula is a GUI that lets you edit a React app. You select a DOM element, use the GUI to make edits and they are ported back into the code. To use it, you don't need to change anything about your app, besides adding the <Scapula /> tag.
Here's a demo of me building an app to view film posters. The demo includes me using the GUI to style the app and add components to the code base, and building a plugin to view the props of React components.
https://www.youtube.com/watch?v=hx69HgfwWfM
Changing the appearance of elements feels better with the GUI than editing a className. It's more natural to select an element than find a source file. And the feedback loop is a tighter because there's no saving or switching applications. The gap between making the edit and checking the result seems to have cross some time threshold that means it no longer feels like there's a waiting or passive moment in between. Overall, it's more fun.
Using the GUI to adding components is a mild improvement over doing it manually. It mostly just avoids something I find annoying.
It feels kind of cool to add a plugin on the fly. But, again, it's a small improvement. It only saves you creating the plugin file. The tool doesn't help you create the actual plugin functionality.
There might be some value in having props and state for the selected component on screen the whole time. But I haven't really used it yet, so I'm not sure.
Overall, there's a split-brain feeling between using the GUI and editing code. I almost feel a mental smear when I switch from one to the other. Like a process is spinning up in my head.
It felt very powerful to lean on the browser's built-in element selector as the thing that is used to select a DOM element. I actually laboriously implemented my own DOM element selection logic before it hit me like a thunderbolt: this is built in and has zillions of developer hours poured into it already. The built-in tool shows the outlines of elements you could select as you hover over them. And it lets you refine your selection using the DOM tree printed in the Elements tab of the developer console.
Another good decision was making sure that Scapula doesn't require you to structure your app in a special way, and that it writes the code you would have written yourself. There is an infinite graveyard of tools that require you to start from scratch, or change your style. The big win with Scapula is that, no matter what, the experience can't get any worse than it was before because you can always just go back to writing code using your usual tools.
There are some other plugins I can think of that might be useful. Dragging components to re-structure your component tree. Using pop-up editors rather than a bar on the right hand side. Having a rich view of props and state on screen the whole time.
Building Scapula felt like a real fight. The main job was mapping between the DOM and an AST. For example: what source file and AST node does the selected DOM element correspond to? This was relatively easy in simple cases, but more complex with more complex React components. For example, it's quite hard to find the AST node that corresponds to a DOM node that was rendered, assigned to a variable, then inlined into the JSX returned by the component.
The overriding feeling was of building in an inhospitable environment. A visual output certainly bears a relation to the code that produced it. But the differences are numerous and tiresome. And each tool I added felt like fighting my way into the Abstract Syntax Tree Forest to add the little piece I wanted. Further, because the DOM only represents the visual parts of the app, most of the app's behavior is not represented. And it's behavior that's in the most dire need of being built faster.