Onlook Review 2026: Pricing, Features, Pros & Cons
Onlook calls itself “Cursor for designers” — a visual editing surface that operates on your real React codebase instead of a mockup someone has to rebuild later. Here's what it genuinely fixes, where the closed beta and React-only scope bite, and how it compares to v0 and Figma in 2026.
Quick Verdict
Best for: React teams where the design-to-engineering handoff is the bottleneck, and who are comfortable self-hosting an early-stage open-source tool. Skip it if: your front end isn't React, you need published pricing, or you mainly need a place to explore ideas before a codebase exists.
What Is Onlook?
Onlook is a visual editor that operates directly on a team's React source code. Designers navigate the component tree the way they'd navigate layers in a design tool, select any element on a live preview of the running app, and change it — and that change is written into the repository as code, not captured as a comment for an engineer to implement.
The workspace exposes what a design-tool user expects — layers, pages, assets, elements, plus brand and theming controls — but each panel is backed by the underlying source. Design tokens, colour palettes, and typography are managed centrally and applied through the code, so a brand change propagates through the app rather than being reapplied screen by screen.
Because the work happens inside a repository, Onlook inherits things design tools traditionally lack: branching, full version history, and reusable project templates a team can share. The project is open source with roughly 25.8k GitHub stars and can be self-hosted for free; the hosted cloud version is in closed beta.
Onlook Pros & Cons
✓ Pros
- •Edits land as real code changes in your repository, which removes the entire design-to-engineering handoff step where mockups get re-implemented and drift from the design
- •Open source and self-hostable for free from the GitHub repository — roughly 25.8k stars — so you can evaluate the whole product without a sales conversation
- •Familiar mental model for designers: layers, pages, assets, elements, and brand controls, but each panel is backed by source rather than a canvas
- •Design tokens, palettes, and typography are managed centrally and applied through code, so a theming change propagates properly instead of being re-applied per screen
- •Branching and full version history give design work the version-control affordances traditional design tools never had
- •Reusable project templates let a team standardise how new surfaces start rather than copying an old file
✗ Cons
- •The hosted cloud product is in closed beta and sold through a demo — there is no public per-seat price, so you cannot budget for it from the website
- •React-only. If your front end is Vue, Svelte, plain HTML, or a native mobile app, Onlook does not apply at all
- •Self-hosting means you own the setup, upgrades, and the infrastructure — cheap in licence terms, not free in engineering time
- •It requires designers to work against a real repository, which is a genuine workflow change and a harder sell to a design team happy in Figma
- •Early-stage product: expect rough edges on complex component trees and less polish than a decade-old design tool
- •Not a whiteboarding or ideation surface — for early exploration before a codebase exists, you still reach for Figma
Onlook Pricing 2026
Onlook's pricing is unusual for the category: the open-source path is genuinely free, and the hosted path has no public number at all. Budget accordingly — if you need a fixed cost this quarter, self-hosting is the only tier you can price.
Self-hosted
- •Full product from the GitHub repo
- •Run on your own infrastructure
- •No seat limits imposed by licence
- •Community support via GitHub
Teams who want to evaluate or run Onlook without a sales process
Cloud (Closed Beta)
- •Hosted, no infrastructure to run
- •Managed updates
- •Onboarding support
- •Access gated by beta waitlist
Teams who want the product without operating it themselves
Team
- •SSO via SAML or OAuth
- •Audit logs
- •Admin and access controls
- •Shared project templates
Organisations with security review requirements
Onlook vs v0 vs Figma
| Feature | Onlook | v0 | Figma |
|---|---|---|---|
| Edits your real codebase | ✅ Yes, in-repo | ⚠️ Generates code to copy out | ❌ Mockups only |
| Open source / self-hostable | ✅ Yes | ❌ No | ❌ No |
| Public pricing | ⚠️ Cloud is demo-gated | ✅ Published tiers | ✅ Published tiers |
| Framework support | ⚠️ React only | ⚠️ React / Next.js focus | ✅ Framework-agnostic |
| Branching + version history | ✅ Git-backed | ⚠️ Chat history | ✅ File version history |
| Central design tokens in code | ✅ Yes | ⚠️ Per-generation | ⚠️ Variables, not code |
| Good for early ideation | ⚠️ Needs a codebase | ✅ Prompt to prototype | ✅ Best-in-class |
How Onlook Works
You point Onlook at a React project — either self-hosted from the GitHub repository or through the hosted beta. It renders a live preview of the running app alongside a layers panel derived from the actual component tree, so what you select in the sidebar is the component that exists in source.
Selecting an element and adjusting spacing, typography, or colour writes the corresponding change into the code. Brand and theming controls operate on the project's design tokens rather than on individual elements, which is what makes a palette or type-scale change land everywhere at once.
Because everything is a code change, the surrounding workflow is git: work on a branch, review the diff, keep full history. That's the part that's genuinely new — design changes become reviewable artifacts rather than screenshots in a ticket.
Who Should Use Onlook?
The clearest fit is a React product team where design changes queue behind engineering time — small spacing, copy, and theming fixes that are trivial in a mockup and slow in a sprint. Onlook lets a designer land those directly, on a branch, without a handoff.
It's a poor fit for non-React stacks, for teams that need published pricing to get procurement approval, and for early-stage exploration where no codebase exists yet — Figma remains better for that, and v0 or Lovable are faster for generating a first draft from a prompt.
Frequently Asked Questions
How much does Onlook cost?
Onlook is free if you self-host: the project is open source and the full product can be run from its GitHub repository at no licence cost. The hosted cloud version is in closed beta and priced through a demo conversation rather than a public page, so there is no per-seat number to quote — team tiers add SSO via SAML or OAuth, audit logs, and admin controls, again quoted rather than listed. If you need a firm budget number today, self-hosting is the only path with a knowable cost.
What is Onlook used for?
Onlook is used to make design changes directly against a real React codebase. A designer opens a live preview of the app, selects any element the way they'd select a layer in a design tool, and changes it — and the edit is written as an actual code change rather than a redline handed to an engineer. It also centralises brand and theming: design tokens, colour palettes, and typography are managed in one place and applied through the source, so a global change propagates rather than being re-applied screen by screen.
Is Onlook a Figma replacement?
Not for the whole workflow. Figma remains stronger for early exploration, whiteboarding, and any project where the codebase doesn't exist yet or isn't React. Onlook replaces the second half — the part where an approved design is re-implemented in code and slowly drifts from the file. Many teams would run both: ideate in Figma, then move production-surface refinement into Onlook so changes land in the repo directly instead of round-tripping through engineering.
How does Onlook compare to v0?
v0 generates new UI from a prompt and hands you code to copy into your project — it is fastest for going from nothing to a first draft. Onlook works the opposite direction: it assumes the codebase already exists and gives you a visual surface for editing it in place, with git branching and version history around those edits. Use v0 to start something; use Onlook to keep maintaining it visually once it's real.
Is Onlook production-ready?
The open-source project is mature enough to self-host and has drawn roughly 25.8k GitHub stars, but the hosted product is still closed beta, which is the honest signal on maturity. Expect rough edges on deeply nested or unconventional component trees, and less polish than an established design tool. For a team willing to run it themselves and tolerate an early-stage product in exchange for eliminating design-to-code handoff, it's a reasonable bet today; for a team that needs published pricing and an SLA, wait for general availability.
Compare Onlook vs Other Design-to-Code Tools
See how Onlook stacks up against v0, Figma, Lovable, and every other AI design tool in our directory.
ChatGPT already recommends Onlook. Does it recommend yours?
If you're building in AI design tools, run a free AI-visibility scan on your own product — we ask ChatGPT across 5 prompt angles and score how often you get named. ~30 seconds, no signup, no card.
Affiliate disclosure: Some links on this page are affiliate links. If you sign up through them, AISO Tools may earn a commission at no extra cost to you. This never affects our rankings or reviews.
📬 Get the best new AI tools delivered weekly
One concise email with fresh launches, trending picks, and featured standouts.
Join thousands of professionals who discover the best AI tools every week. No spam — unsubscribe anytime.