Onlook
Visual editor that lets you design Next.js and Tailwind apps in the browser while AI edits the code.
Edit a live Next.js and Tailwind app visually, with every change written back to the source.
Onlook is an open-source visual editor for Next.js and TailwindCSS projects with an AI chat that can read and edit the code. It suits designers and front-end developers who want Figma-like editing on a real codebase instead of a mockup.
What it is
You create or import a Next.js app, edit elements directly in a live preview with a Figma-like toolbar, and each edit maps back to the source code through code instrumentation. An AI chat has code access and tools to create or change the project, and you can deploy to a shareable link or custom domain.
Who it's for
It suits designers who read a little code and developers who want visual layout tools on Next.js. It does not suit teams on other frameworks or plain CSS, since the README says non-NextJS and non-Tailwind support are still on the to-do list.
Key features
Visual DOM editing
Edit elements in the browser preview and have the change written to the matching code.
AI chat with code access
The chat can create or edit a project, with a queue for sending multiple messages at once.
Branching and checkpoints
Branch to experiment with designs and restore from saved checkpoints.
Brand assets and tokens
A brand panel manages assets and design tokens for the project.
Real-time code view
Right-click an element to open its exact place in code, with a code editor next to the design.
Deploy from the editor
Publish to a sharable link or link a custom domain.
Up and running in 3 steps
Our honest verdict
What's great
- Edits are tied back to real Next.js and Tailwind source rather than a separate design file.
- Start from text, an image or a template, or import an existing project.
- Code view, branching and checkpoints are built into the same editor.
- The README names open-source alternatives it competes with, including Bolt.new, Lovable and V0.
Where it falls short
- Only Next.js with TailwindCSS is supported; non-NextJS and non-Tailwind projects are listed as unfinished.
- Self-hosting is heavy: the stack uses Supabase, CodeSandbox SDK, Freestyle, OpenRouter and fast-apply model providers, plus Bun and Docker.
- The README says the hosted product for AI-native designers is moving to early access via a waitlist, so this repo is the older open-source editor.
- Real-time collaboration is partial and comments, MCP setup and a drag-and-drop component panel are unchecked in the roadmap.
Pricing & license
The code is free under Apache-2.0. The README links a hosted app at onlook.com and a waitlist for the next hosted product, but shows no prices, so check onlook.com before relying on a paid plan.
Open remote AI-training roles
768 open remote AI-training roles, updated November 14, 2026; most pay $20–$175 an hour. Zekai lists them free; the application goes to the employer’s platform.
Alternatives
These reviewed AI tools do the same job instantly — from our scored directory.
Use it, or have us set it up
FAQ
Which frameworks does it work with?
Next.js with TailwindCSS. The README lists support for other frameworks as not done yet.
Can I run it entirely on my own?
The README points to a local-run guide, but its stack relies on Supabase, CodeSandbox SDK, Freestyle and LLM providers such as OpenRouter.
Is Onlook still the same as the hosted product?
The README says this is the open-source visual editor that started Onlook, and the hosted product is in early access via a waitlist.
