Show HN: Open-sourced Webflow for your own app

336 points

2 years ago

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 :)

94 comments