Show HN: Open-sourced Webflow for your own app

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

Show HN: Open-sourced Webflow for your own app
github.com

This... isn't that. Changes made in the visual editor are translated into code and submitted to your project as a GH pull request for review. So from a project / software perspective, it looks and works like a FE engineer committed a code change.

> it looks and works like a FE engineer committed a code change.

This is exactly the goal :)

To ramesh31 point, we're trying to be cognizant about not putting bloat into the code as we support things like inserting new components since that is where these types of tools typically converge.

A bit off-topic, but this landing page "steals" my cursor, presumably for that special hero effect, which makes it dizzingly laggy and unresponsive.

Watch out for trademarks. Your slogan “The power of WebFlow for your React app” is going to attract attention from Webflow’s legal department if your project is successful.