Hey HN, I’m Kiet – one half of the two-person team building Onlook (https://beta.onlook.com/), an open-source [https://github.com/onlook-dev/onlook/] visual editor that lets you edit and create React apps live on an infinite canvas.

We launched Onlook [1][2] as a local-first Electron app almost a year ago. Since then, “prompt-to-build” tools have blown up, but none let you design and iterate visually. We fixed that by taking a visual-first, AI-powered approach where you can prompt, style, and directly manipulate elements in your app like in a design tool.

Two months ago, we decided to move away from Electron and rewrite everything for the browser. We wanted to remove the friction of downloading hundreds of MBs and setting up a development environment just to use the app. I wrote more here [3] about how we did it, but here are some learnings from the whole migration:

1. While most of the React UI code can be reused, mapping from Electron’s SPA experience to a Next.js app with routes is non-trivial on the state management side.

2. We were storing most of the data locally as large JSON objects. Moving that to a remote database required major refactoring into tables and more loading states. We didn’t have to think as hard about querying and load time before.

3. Iframes in the browser enforce many more restrictions than Electron webview. Working around this required us to inject code directly into the user project in order to do cross-iframe communication.

4. Keeping API keys secure is much easier on a web application than an Electron app. In Electron, every key we leave on the client can be statically accessed. Hence, we had to proxy any SDK we used that required an API key into a server call. In the web app, we can just keep the keys on the server.

5. Pushing a release bundle in Electron can take 1+ hours. And some users may never update. If we had a bug in the autoupdater itself, certain users could be “stranded” in an old version forever, and we’d have to email them to update. Though this is still better than mobile apps that go through an app store, it’s still very poor DX.

How does Onlook for web work?

We start by connecting to a remote “sandbox” [4]. The visual editing component happens through an iframe. We map the HTML element in the iframe to the location in code. Then, when an edit is made, we simulate the change on the iframe and edit the code at the same time. This way, visual changes always feel instant.

While we’re still ironing out the experience, you can already: - Select elements and prompt changes

- Update TailwindCSS classes via the styling UI

- Draw in new divs and elements

- Preview on multiple screen sizes

- Edit your code through an in-browser IDE

We want to make it trivial for anyone to create, style, and edit codebases. We’re still porting over functionalities from the desktop app — layers, fonts, hosting, git, etc. Once that is done, we plan on adding support for back-end functionalities such as auth, database, and API calls.

Special thank you to the 70+ contributors who have helped create the Onlook experience! I think there’s still a lot to be solved for in the design and dev workflow, and I think the tech is almost there.

You can clone the project and run it from our repo (linked to this post) or try it out at https://beta.onlook.com where we’re letting people try it out for free.

I’d love to hear what you think and where we should take it next :)

[1] https://news.ycombinator.com/item?id=41390449

[2] https://news.ycombinator.com/item?id=40904862

[3] https://docs.onlook.com/docs/developer/electron-to-web-migra...

[4] Currently, the sandbox is through CodeSandbox, but we plan to add support for connecting to a locally running server as well

user:	Nimishg14
created:	July 13, 2020
karma:	6
about:	Shipping open source apps. Tweeting about gen AI & my side projects. Launching typesm.art