What Is Onlook?

Onlook bridges design tools and code. It renders your live React app in a canvas, lets you select any element, and applies AI-driven edits that land directly in the codebase, so the visual layer and the source stay in sync.

How to Use Onlook: Step by Step

1. Install Onlook

Download the desktop app or run it against your local project. It works with Next.js and other React setups out of the box.

2. Open your project

Point Onlook at your codebase directory. It builds the app in a live preview so every element you see maps to a real component in your files.

3. Select an element

Click any component in the preview. Onlook highlights the matching source and shows its styles, props, and position in the component tree.

4. Describe a change

Type what you want in natural language, such as ‘make this card use a soft shadow and rounded corners’. Onlook generates the corresponding Tailwind classes and JSX edits.

5. Review the code diff

Before committing, inspect exactly which files and lines changed. Because Onlook edits real source, the diff is the ground truth.

6. Iterate with the chat panel

Continue the conversation to refine spacing, colors, or layout. Each turn is a small, reviewable change rather than a giant rewrite.

7. Commit and ship

Once the design matches your intent, commit the branch and deploy as usual. There is no export step and no vendor lock-in.

Tips for Getting the Most Out of Onlook

• Work on a feature branch so visual experiments stay isolated from main.
• Be specific about tokens and spacing; naming your design system helps the AI stay consistent.
• Use the element tree to restructure layout instead of fighting auto-layout in CSS.
• Review diffs regularly to catch the occasional class that does not match your conventions.

Final Thoughts

Onlook removes the friction between an idea and a working result, whether you are automating research, writing code, or orchestrating multi-step AI workflows. Start with a small, concrete task, review every step the agent takes, and expand from there. With the workflow above you can go from installation to a finished, verified result in a single session.