Onlook — Visual AI Code Editor for React Apps

What it is

Onlook is an open-source visual editor for building React and Next.js applications. It works like Figma but directly manipulates your source code. When you drag, resize, or restyle a component visually, the corresponding JSX and CSS update in real-time. AI features assist with generating components and layouts from natural language.

Onlook is for frontend developers and designers who want to iterate on UI without constantly switching between a design tool and a code editor. It is also useful for non-technical team members who need to make visual adjustments without writing code.

How it saves time or tokens

Visual editing eliminates the guess-and-check cycle of CSS changes. Instead of writing margin values, saving, reloading, and adjusting, you drag elements directly. The code updates are written back to your actual source files, not a separate design artifact.

Design branching lets teams experiment with UI variations without creating git branches for every experiment. This reduces context-switching overhead for both designers and developers.

How to use

1. Visit onlook.com to download, or run locally:

git clone https://github.com/onlook-dev/onlook.git
cd onlook
npm install
npm run dev

1. Open your existing React or Next.js project in Onlook.

1. Select any component on the canvas to edit its styles, props, or layout visually. Changes write back to your source files.

Example

Using Onlook's AI to generate a component:

Prompt: 'Create a pricing card with three tiers,
         monthly/annual toggle, and a highlight
         on the middle tier'

Onlook generates:
- PricingCard.tsx component
- Tailwind CSS classes
- Responsive breakpoints

The generated code appears in your project directory as actual source files, not a preview.

Related on TokRepo

• AI tools for design -- AI-powered design and prototyping tools
• AI tools for coding -- Code editors and AI coding assistants

Common pitfalls

• Expecting Onlook to work with non-React frameworks. Currently it supports React and Next.js only. Vue, Svelte, and Angular are not supported.
• Using Onlook on a project with heavy runtime-generated styles (CSS-in-JS with dynamic values). Static Tailwind and CSS modules work best with visual editing.
• Forgetting to commit Onlook's code changes. The tool writes directly to your source files, so uncommitted changes can be lost if you reset your git working directory.