1. What Is Onlook?
2. What Is Onlook For?
3. What Problem Does Onlook Solve?
4. What Design Principles Underlie Onlook?
5. What's next?

Onlook is 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.

Onlook lets you visually develop UI while fully owning your code. There are other visual builders out there, but they either require you to upload your code to the cloud or have a super lengthy setup process. Onlook runs locally, deterministically, and only needs a single line config change (npx onlook) to work.

With Onlook you can:

• Visually edit your React app like a design tool
• Write the changes into code in real-time
• Work with your existing project with no migration
• Run all your code securely, locally

Writing code for UI is tedious. This is why no-code tools exist. The problem is that no-code tools all have the following issues:

1. Try to own your codebase
2. Make you migrate
3. Write bad code that you can't use

With Onlook:

1. Your code never leaves your machine
2. You don't need to migrate
3. You get code you can use

Onlook works by:

• Editing your UI in the browser, all changes are ephemeral in the DOM. Similar to Chrome Devtool.
• Injecting a tracker at build time to tie the changes from the DOM back to where it is in code.
• Use standard parsers to parse the code, inject the changes, and serialize it back.

Now that we’ve built the core engine, we can start doing more visual builder features, fulfilling the “Webflow” part of our mission such as:

• 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.