Onlook is an open-source, Apache-2.0 visual editor for Next.js and TailwindCSS projects that lets designers and developers edit a running React app in the browser while the underlying code changes in real time.

What it is

Onlook is a visual-first code editor that runs on top of an existing codebase rather than beside it. When a project is imported, the code loads into a web container, the container serves the app, and the editor displays that preview inside an iFrame. Onlook then reads and indexes the code from the container and instruments it so every rendered element maps back to its exact position in the source. Edits made visually are applied to the element in the iFrame first, then written through to the code, which keeps the design surface and the repository in sync instead of forcing a round trip through export and re-import.

The concrete problem it solves is the gap between design tools and the codebase they describe. Designers working in Figma-style UIs normally hand off static specifications that engineers rebuild by hand, and the two artifacts drift apart immediately. Onlook replaces that handoff by making the running Next.js application itself the design canvas. Right-clicking an element opens its exact location in code, and the AI chat has the same code access and tooling as the developer, so text prompts and direct manipulation produce real commits rather than mockups.

Key capabilities

• Creates a Next.js application in seconds, starting from text, an image, or a prebuilt template.
• Provides a Figma-like visual editing surface over the live DOM, with a toolbar for adjusting Tailwind styles, manipulating objects, and experimenting with layouts.
• Supports drawing in new divs and rearranging them inside their parent containers by drag-and-drop.
• Maps elements to source: right-click any element to jump to its exact location in code.
• Runs a real-time code editor alongside the preview so design and code can be viewed side by side.
• Saves and restores work from checkpoints, and uses branching to experiment with design directions.
• Manages brand assets, tokens, project images, pages, and component detection, and browses the layer tree.
• Runs commands through a CLI, connects to an app marketplace, deploys the app, generates shareable links, and links a custom domain.

Who uses it and how

• AI-native designers who work directly against a codebase instead of producing static handoff files.
• Frontend teams on Next.js and TailwindCSS that want visual iteration without abandoning the repository as the source of truth.
• Prototypers who start from a text description or a reference image and need a working app rather than a mockup.
• Developers who queue multiple AI chat messages at once while continuing to edit visually in the same session.
• Teams experimenting with design variants through branching, then deploying and sharing a link or attaching a custom domain.

Getting started

Use the hosted app at onlook.com, or run it locally by following the instructions at docs.onlook.com/developers/running-locally.

How it compares

Onlook positions itself as an open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, and Webflow. Those products are hosted services, so the project files, the AI pipeline, and the deployment target sit with the vendor, while Onlook is Apache-2.0 licensed and can be run locally against code that stays in the developer's own repository. The trade-off is that the vendor-hosted offerings carry no operational burden, whereas a self-hosted Onlook instance is something the adopter maintains.

When to use it — and when not to

Self-hosting means operating the web container that builds and serves each project, plus whatever infrastructure the local development setup described in the docs requires. Do not pick Onlook for non-Next.js or non-Tailwind projects: both are listed as unsupported, and the README is explicit that it runs only on Next.js plus TailwindCSS. Team collaboration and comments are still unimplemented, MCP setup is not yet available, and images as references and assets are incomplete, so teams needing multi-user editing should wait. The hosted product for AI-native designers is in early access behind a waitlist, and the GitHub README is largely a feature checklist that defers real setup detail to the external docs.