Hi HN,
I’m Kiet, one of the creators of Onlook studio. I made this app that allows you to visually edit your locally running React app and write the code back to it in real-time. The purpose is to allow you to develop UI while fully owning your code the whole time. There are other visual builders out there but they either require you to upload your code to the cloud or some lengthy setup process. Onlook runs locally, deterministically, and only requires adding a plugin for the compile step (2 lines of config change).
Technical details:
This is technically a web browser that can point to your localhost, which injects some CSS into the page that allows you to select, drag, and drop DOM elements, then track and translate those changes back into React code. Theoretically, you could do this with any compiled framework but I wanted a reasonable scope for the launch (the first version was actually in Svelte).
Some interesting challenges:
1. There is a React parser that is used to parse, insert the style, and serialize it back to code
2. There is a React pre-processor that traces the DOM elements to the corresponding code
3. There's also CSS parsing, injection, and converting to Tailwind
4. This is also an Electron app so there’s a browser within a browser within a node app which makes message passing… interesting
What’s next?
We’ve already built a proof-of-concept for inspecting and selecting layers, dragging to reorder, and inserting new DOM elements that I’m working on porting over from our private codebase. We’re also exploring opening more tabs in new frames in order to A/B test the changes before committing to code. There’s a long tail of exciting features we can do but I want to put this out there first and see what others would need.
Let me know what you think/feedback. It's been a blast working on this so far and I think it’s just neat :)
The key pain for us that I think you're touching on is that "design/dev mode" isn't how teams actually work. Devs do far more design than we think. My experience is that designers do the pretty or complex pieces, while dev does the long tail "boring" designs. Often devs do the screen layouts since nav and routing can get a bit complex. Secondly, designers don't just hand off a design and that's it. The design system gets implemented as components, which have tweaks due to usability/issue reports/further design, and then the designers really want to be taking those components and recomposing them back into sections and screens. Ideally designers would be just setting props like images, text and ids faaaar up the abstraction layers, with dev components being automatically synced back in as they're built and updated.
So definitely think your setup is potentially hitting a sweet spot between dev/design. Just to validate it as as product - plus one for open source with a paid hosted tier for convenience. Devs get to tinker, and designers don't have to think about how to run it.