Chrome inspector does so much more like clip support and media queries that I didn't even know about. It also writes directly to inline styles so propagating those changes as code is definitely possible. I was thinking if there's a way we can leverage the great work the Chrome devtool have already put in.
I don't want to step on your toes by linking my own project, but essentially my idea is: the editor creates an object representation of the html/css which can then be transpiled into any framework the user wants (so long as there is an existing transpiler for it). Then the output could be hosted on npm or some other remote repository for the application repo to install.
Not at all, it's in good spirit! Happy to talk through any technical details from my side :)
> though if you try to listen for those changes with a mutation observer, it won't fire
It doesn't have to fire an immediate mutation imo. When you click on an element to edit, you could inject a data-attribute into it (not sure if the Chrome Devtool let you do this but an extension might). At write-time, you can query the elements that were marked, get the delta and write it to code.
You might've thought of this longer than I have so I think that might be a naive solution.
> can then be transpiled into any framework the user wants
You might be interested in Mitosis https://github.com/BuilderIO/mitosis