An open-source, local-first Webflow for your own app
Hey HN, I’m Kiet, and I’m one of the co-founders of Onlook – an open-sourced desktop app that lets you visually edit your locally running React app, then write your changes back to code in real time. I posted the repo a few months ago [1] when it was just 2 weeks old. Since then, we’ve made some big changes/improvements. I wanted to share some of the updates we’ve made and add more technical details. Here are the three big ones: • Inserting new elements - Draw elements in the live page like a design tool and write them back to code. • Component detection - Detect when an element is a…
In plain words
Onlook is an open-source desktop application that enables developers to visually edit React apps running locally, then automatically write changes back to code in real time. It functions as a visual editor for live applications, offering features like element insertion through drawing, automatic component detection, and a DOM tree layers panel. Designed for React developers, Onlook bridges the gap between design tools and code editing by letting users modify interfaces visually without leaving their development environment.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
Hey HN, I’m Kiet, and I’m one of the co-founders of Onlook – an open-sourced desktop app that lets you visually edit your locally running React app, then write your changes back to code in real time. I posted the repo a few months ago [1] when it was just 2 weeks old. Since then, we’ve made some big changes/improvements. I wanted to share some of the updates we’ve made and add more technical details. Here are the three big ones: • Inserting new elements - Draw elements in the live page like a design tool and write them back to code. • Component detection - Detect when an element is a re-used component and find its usages. • DOM tree representation - A layers panel similar to the Chrome devtool or Figma. Technical details [2]: Visual editing - Onlook is technically a browser that points to your localhost running the app. It can manipulate the DOM like a Chrome Devtool, and all these changes are injected into the page through a CSS stylesheet or DOM manipulation. The changes are non-persistent until written to code. Write to code - To translate the changes to code, we inject an attribute into the DOM elements at build-time that points back to the code like a source map. The attribute gives us the location of the code block, and the component scope [3]. We then find the code, parse it into an AST, inject the styles, and write it back. Framework support - This technique is framework agnostic as we can swap in a different compiler for another framework [4]. It can work for any codebase as we’re just using open standards that don’t require any custom code. The code generated is written directly into your codebase, locally, so you can always take the output without being locked-in to the tool. Actions - All the changes made are stored as actions. This allows them to be serialized, stored, and reproduced. We did it this way so eventually, we can introduce online collaboration or let an agent generate actions. To do this, we’d just need to serve the locally running page and resolve incoming actions. What’s next? It’s still a bit bare-bones but the support and suggestions from the HN and open-source communities have helped us a lot with our direction. Now that we’ve built the core engine, we can start doing some cooler visual builder features, fulfilling the “Webflow” part of our mission such as [5]: • Detecting CSS variables in the page and letting you use them as “design tokens” in the UI. • Duplicating a page and A/B testing designs before committing to code. • Creating new components directly in the canvas. • Creating a front-end project from scratch using Onlook. Some things we’re considering, but aren’t sure about yet: • Offer hosting directly from the app. • Collaboration such as real-time edits, comments, and share page as a prototype. I’d love to hear your thoughts/feedback. This project continues to be a blast to work on and the community response has been awesome. Thank you to everyone who has tried out and contributed to the repo :) _________ [1] https://news.ycombinator.com/item?id=40904862 [2] https://github.com/onlook-dev/onlook/wiki/Architecture [3] The attribute looks something like this: data-onlook-id="eJxNjUEKwzAMBP+ic6gOKT3k2i+kDzC2aEwcKVgyDQT/vU5pS067sMvMDl6WVZjYYIC7y2GMlgg6IA6je8LAJaUOVmdTO+BDKSvOkWwSfEme1+Q8oXASmVGthCgYaBFFps3wT1csEX3jX0y3hldz2T6C/VAd4SWVhWG4dpAiUyt9/R7Pc/+b+1ut9Q33rUM5" And decodes to this: {"component":"Dashboard","endTag":{"end":{"column":10,"line":620},"start":{"column":5,"line":620}},"path":"/Users/kietho/workplace/onlook/studio/demos/next/components/dashboard.tsx","startTag":{"end":{"column":67,"line":69},"start":{"column":5,"line":69}}} [4] We’re only supporting a few versions of React at the moment for early focus: https://github.com/onlook-dev/onlook/tree/main/demos [5]…
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, August 2024
the whole month →
- IY
Life & fun · 2024 · ytch.xyz
- IA
Hey there HN! We’re Joe and Stopa, and today we’re open sourcing InstantDB, a client-side database that makes it easy to build real-time and collaborative apps like Notion and Figma. Building modern apps these days involves a lot of schleps. For a basic CRUD app you need to spin up servers, wire up endpoints, integrate auth, add permissions, and then marshal data from the backend to the frontend and back again. If you want to deliver a buttery smooth user experience, you’ll need to add optimistic updates and rollbacks. We do these steps over and over for every feature we build, which can…
Dev tools · 2024 · github.com