If you’ve ever opened Figma, designed the perfect component, handed it off to a developer, and watched it transform into something completely different in code — Onlook was built exactly for that frustration.
Onlook is an open-source visual editor with built-in AI that lets you design directly inside your running React application. You click an element, drag it, change its colors, add a new div — and your actual .tsx files update in real time. No Figma exports. No handoff documents. No conversations like “can you move the button a bit more to the left?”.
With 25.1K stars on GitHub and trending right now, it’s worth understanding what it actually does.
How Onlook Works
Onlook runs on any Next.js + TailwindCSS project. When you open your project, it spins up your app inside a web container (using the CodeSandbox SDK + Bun runtime) and instruments the rendered HTML with special data-oid attributes at build time. Each attribute maps a visible DOM element back to its exact line of source JSX code.
When you edit something visually — drag a card, change a color, resize a section — Onlook uses the oid to locate the correct JSX, patches it, and fires a hot module reload. You see the change in the canvas and in your file tree simultaneously.
The AI layer uses Morph Fast-Apply + OpenRouter to stream code edits via diff. You can describe changes in natural language:
“Make this hero section darker on hover”
And Onlook generates the React + Tailwind diff, applies it, and shows the result — without you touching a single line of code manually.
What You Can Do Visually
- Drag-and-drop elements and reorganize them within their parent containers
- Draw new divs directly on the canvas
- Adjust Tailwind styles from the editor panel (colors, spacing, typography)
- Extract components — right-click any element and Onlook creates a reusable
.tsxfile, replacing the inline JSX with the new component - Navigate the component tree through a visual layers panel — no more manual searching through JSX
- Rollback anytime — Onlook automatically saves project snapshots so you can experiment with confidence
- Preview code in parallel with your visual canvas
The AI Chat
Beyond visual editing, Onlook has an AI chat that understands your React components and Tailwind patterns. You can prompt it to build from scratch:
“Design me an inventory tracker website for my café”
The AI generates code that fits your project’s existing architecture — not generic boilerplate you have to refactor later.
Self-hosted vs Hosted
Onlook is open source (Apache 2.0) and free to self-host. There’s also a hosted cloud version — useful if you don’t want to deal with setup.
Honest take: the free plan limits you to 5 AI messages. That’s not much for iterative design work. If you’re going to use it seriously, self-hosting is the practical path — though even then, AI features still route through cloud services.
Who Is It For?
Onlook occupies an interesting middle ground. It doesn’t replace Cursor or Claude Code for complex logic, API integrations, or backend work. Think of it as the tool you open when the architecture is already in place and you need the UI to look right — fast, visually, without bouncing between the browser and the code editor.
It’s especially useful for:
- Designers who code (or want to)
- Frontend developers who think visually
- Teams where designers and developers need to collaborate directly on the same codebase
In terms of positioning, Onlook competes with Figma Make, Bolt.new, Lovable, V0, and Webflow — but with one key difference: you work directly in your real project, not in a sandbox. Your existing build process stays intact.
Getting Started
# Option 1: Use the hosted app at onlook.com
# Option 2: Self-host
git clone https://github.com/onlook-dev/onlook
# See docs.onlook.com/contributing/developers/running-locally
Once it’s running, you import your existing Next.js + Tailwind project or start fresh inside the editor.
Onlook is one of those tools that’s hard to explain with words alone — you have to see the DOM-to-source mapping in action to understand why the experience is different. If your stack is React + Tailwind, it’s worth 20 minutes.