Onlook
Apache 2.0 visual editor for Next.js and Tailwind repos. Maps DOM elements back to source lines, so canvas edits become real code changes instead of a fresh generation.
Overview
Positioned as a visual editor for people who work in real repositories. It instruments a running Next.js and Tailwind project, maps DOM elements to the source locations that produced them, and rewrites those lines when you drag or restyle on the canvas. Changes made by hand in the editor show up in the live preview immediately, so the two directions stay in step.
That architecture is the reason to look at it. Most tools in this category respond to a visual change by asking a model to produce the file again, which is why diffs churn and why nobody trusts the output on a second pass. Onlook edits what is already there. Combined with Apache 2.0 licensing, self-hosting on Bun, Docker and Supabase, and a bring-your-own OpenRouter key, it is the option that leaves a team in control of both the code and the inference bill.
Set expectations at the version number. 0.2.32 as of 17 July 2026, with over 300 open issues and a roadmap that still lists a component panel, comments and support for frameworks beyond Next.js. The hosted product was closed beta in August 2026, priced by conversation. Where the mapping meets clsx-style dynamic classes or CSS-in-JS it degrades. Worth self-hosting for a look if your frontend really is Next.js and Tailwind and you want an open alternative to Subframe or v0. Not something to standardise a team on yet.
Key Features
- ✓ Bi-directional sync between canvas and code, with DOM elements mapped to their source locations so an edit rewrites the right lines
- ✓ Direct manipulation of Tailwind classes on a live preview of your own running app
- ✓ Runs against a real repository rather than a sandbox, so what you edit is the project you ship
- ✓ Bring your own model through OpenRouter, which keeps inference cost and data routing under your control
- ✓ Self-hostable with Bun, Docker and Supabase, or usable through the closed-beta hosted version
- ✓ Code stays yours, exportable locally or pushed to GitHub
Where it holds
- • The only credible open-source option in this category, at 26.6k GitHub stars and Apache 2.0 with no copyleft complications
- • Editing maps back to source instead of regenerating a file, which is the difference between a design tool and a lottery
- • Bringing your own key means no per-seat credit meter and no third party holding your codebase context
- • Active development, with releases through July 2026 and a large contributor base
Where it breaks
- • Next.js and Tailwind in practice, despite the claim to any declarative DOM framework. Other stacks are roadmap, not reality
- • Version 0.2.32 as of 17 July 2026. Pre-1.0 software with 300-plus open issues, and features like a component panel and comments still listed as pending
- • The mapping from element back to source gets fragile once a codebase uses dynamic class construction, CSS-in-JS or heavy component abstraction
- • Self-hosting pulls in Supabase, CodeSandbox SDK, Bun and Docker, which is a real setup job, while the hosted alternative is closed beta with no published price
My Take
The open-source entry, and the only one here where an edit maps back to source lines rather than triggering a regeneration. Point it at a Next.js and Tailwind repo, move something on the canvas, and the Tailwind classes change in the actual file. Apache 2.0 with no licence anxiety, and you supply your own OpenRouter key so model spend and data routing stay yours. Maturity is the honest caveat: 0.2.32 as of 17 July 2026, hosted cloud still closed beta with pricing by demo only, and the element-to-source mapping gets brittle the moment a codebase leans on dynamically built class names or anything that is not Tailwind.
Quick Info
- Pricing:
- open-source
- Openness:
- Open source
- Licence:
- Apache-2.0
- Starting at:
- Self-hosting is free under Apache 2.0 with no seat cost. Model calls go through your own OpenRouter key, so inference is whatever you spend upstream, with Morph Fast Apply and Relace used for fast edits. The hosted cloud product was still closed beta in August 2026 with pricing only available through a demo, so there is no public list price to plan against.
- Added:
- Aug 2026
- Updated:
- Aug 2026
Use Cases
Judge it on your own work
The notes above say where Onlook holds and where it breaks. The fastest check is your own workload.
Visit website ↗Alternatives to Onlook
v0 by Vercel
freemiumPrompt-to-UI agent from Vercel. Outputs React, Next.js and Tailwind on shadcn/ui, pushes to a GitHub branch, and Design Mode edits styling without spending credits.
Subframe
freemiumVisual editor that exports React, Tailwind, TypeScript and Radix. Components sync into your repo through a CLI, and the export is deterministic rather than model-generated.
Figma Make
paidPrompt to working prototype inside Figma, with Make Kits that sync your npm packages and library styles so generated screens follow the real design system.