Onlook is an open-source tool that lets you edit React and Next.js web apps through design-tool-style screen operations, working directly on the real codebase. Positioned as “Cursor for Designers,” it does away with the round trip of building a separate design mockup and then handing it off for implementation: you touch and adjust the running codebase itself on screen. Click an element, change its color or spacing, and the change is written back into the source code. Built in the United States and released in 2025, it is developed on GitHub under the Apache 2.0 license and has gathered over 26,000 stars.
Key Features
- Visual editing directly on the real codebase: Select an element in the browser preview and change text, color, spacing, and layout by dragging or using panels. Changes are written back into the underlying React components and Tailwind CSS classes, so design and code never drift apart
- Generation and revision through AI chat: Natural-language instructions such as “turn this section into cards” generate or revise components. You can also pass images as references and connect external tools through MCP (Model Context Protocol)
- Natural round trips to the code: Right-click an element on screen to reach the corresponding source code. It is easy to shape the broad strokes visually and refine the details in code
- Real-time team collaboration: Multiple people can edit the same project simultaneously and leave comments. Branches and checkpoints (saved versions) handle history, and deployment fits into the same flow
- Theme management for brand consistency: Colors, typography, and styles are held as project-wide settings, keeping individual screens from drifting out of alignment
- Open source and self-hostable: Published under the Apache 2.0 license, it can be pulled from GitHub and run for free in your own environment. It supports setups such as Next.js, Vite, shadcn/ui, and Storybook
Pricing
| Plan | Price | What’s included |
|---|---|---|
| Self-hosted (open-source version) | Free | Pull from GitHub and run in your own environment. Apache 2.0 license |
| Cloud (hosted version) | Contact required | Currently in closed beta. Apply via the waitlist or by booking a demo |
| Teams | Contact required | Project templates, branching and version control, theming and branding, and advanced security such as SSO and audit logs |
Pricing reflects information as of August 2026. The official site publishes no monthly plan table; both the cloud version and the team offering are contact-based. Please check the official site for the latest pricing.
Pros & Cons
✅ Pros
- Eliminates the double management of design and code, removing the round trip of rebuilding a mockup and handing it over for implementation
- Even non-engineer designers can adjust the appearance of a running app themselves
- Being open source, it can be tried for free, inspected, and operated inside your own environment
- Branches, checkpoints, and comments — mechanisms built for team work — are there from the start
- AI chat and visual editing can be used separately depending on the goal
⚠️ Cons
- The cloud version is in closed beta, so applying does not guarantee immediate access
- With no published price list, it is hard to gauge the cost of paid use in advance
- Coverage is limited to the React and Next.js family. It does not apply to other frameworks or CMS-based sites
- Self-hosting requires preparing a runtime environment such as Docker and Bun, which is a high bar for non-engineers
- As a relatively new product, its specifications and features are subject to change
Comparison with Similar Services
| Item | Onlook | v0 | Lovable | Builder.io |
|---|---|---|---|---|
| Main use | Visual editing of an existing codebase | UI generation from prompts | App generation from prompts | Visual editing and CMS |
| Target users | Designers and development teams | Developers | Non-engineers to developers | Marketers and developers |
| Supported stack | React / Next.js / Tailwind | React / Next.js | React family | Multiple frameworks |
| Open source | Apache 2.0 | Closed | Closed | Partially open |
| Pricing model | Free self-hosting / cloud by inquiry | Free tier and paid plans | Free tier and paid plans | Free tier and paid plans |
Who Is It For
- Teams with an in-house React or Next.js product whose designers want to adjust the appearance without waiting on implementation
- Production settings that want to stop managing design and code separately
- Frontend developers who want AI to lay out the broad strokes while they refine the details by hand and in code
- Organizations with strict security requirements that want to run open source inside their own environment
- Startups looking to lower the handoff cost between designers and engineers
Summary
Onlook rethinks the very order of “design first, then implement,” giving you a tool that designs the running code directly. Its scope is narrowed to React and Next.js projects, but within that range it closes much of the distance between design and implementation. Since the cloud version is still in closed beta and its pricing is unpublished, the best starting point is running the open-source version from GitHub in your own environment to get a feel for it.