Onlook
Local-first visual editor for React and TailwindCSS where the code is the source of truth.
Onlook is the pick when your deliverable is a React/Tailwind component, not a mockup — you edit the real tree and the diff is your design review. Its AI chat reads and edits actual files (the demo assistant opens ImageGrid.tsx and rewrites breakpoints), and Villainterest adds real-time collaboration inside the codebase. The catch is commercial: the hosted cloud is closed beta and For Teams is custom-quoted, so most teams start by self-hosting the GitHub repo. If you need high-fidelity exploration, mobile canvases, or a no-code workflow, reach for Figma or a no-code builder instead.
Verified 10d ago · liveness 75/100 · cite: rightaichoice.com/tools/onlook
- Designers working directly in a React and Tailwind codebase
- Product teams that want one source of truth between design and code
- React developers maintaining a design system with shadcn/ui
- Teams fixing responsive breakpoints and layout bugs with AI help
- Newcomers with no React or TailwindCSS background
- Anyone needing mobile or small-screen design editing
- High-fidelity exploration where Figma is still the creative sandbox
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Onlook if your team does not work in React and TailwindCSS, or if you need mobile and small-screen design editing — its value depends on the code being the source of truth.
Self-hosting is free on GitHub, but you carry the hosting, upgrades, and maintenance cost of running the editor yourself.
Self-hosting Onlook is free, which suits individual designers and small React teams who can absorb running the editor themselves. The hosted cloud 'For Teams' plan is custom-priced and in closed beta, so budget-conscious teams will start open-source while teams that need SSO, audit logs, and admin controls negotiate directly. Compared with a paid Figma seat, Onlook's free path costs nothing but engineering time; compared with enterprise design platforms, its cost lands only once you need the
In short
Onlook — Local-first visual editor for React and TailwindCSS where the code is the source of truth. Best for Designers working directly in a React and Tailwind codebase, Product teams that want one source of truth between design and code, React developers maintaining a design system with shadcn/ui. Free to use.
What's new in Onlook
Checked yesterdayAcross the latest 1 update: 1 feature update.
What people actually say about Onlook — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
39 mentions across 3 sources (Hacker News, GitHub, Lemmy) · researched Jul 3, 2026.
Average across the 3 sources that answered — each source counts once, not each post.
- +Tight feedback loop from design to real React code.
- +Fully replaced Figma for some users, according to HN.
- +Open-source and free for individuals and small teams.
- +AI-powered editing and code generation via natural language.
- +Supports branching and version control for design projects.
- −Cannot import existing projects in the beta version.
- −Generated code includes unwanted selector IDs needing cleanup.
- −Limited to Next.js, React, Storybook, and shadcn/ui currently.
- −Only one CLI connection available in the desktop app.
- −High number of open issues (370+) indicates early stage.
- • Team pricing is not transparent; requires booking a demo.
Viability Score
How well maintained and how widely used is Onlook? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Visual editor for React and TailwindCSS with code as source of truth
- Drag-and-drop, rearrange, and scale elements directly in the editor
- Direct editing of components and styles in the React component tree
- AI chat for styling, layout, and responsive breakpoint fixes
- AI prototyping on an infinite canvas
- Layers and navigation-bar panel for precise control over every element
- Live preview of the React component tree
- Branching and version control with full revision history
- Reusable project templates across a team
- Centralized design tokens, color palettes, and typography management
- Works with Next.js, React, Vite, Storybook, and shadcn/ui
- Open-source and self-hostable on GitHub
- Export code to local machine, publish to GitHub, or host at a link
- Real-time collaboration via Villainterest with live preview and AI chat
- SSO (SAML/OAuth), audit logs, and admin controls on the team tier
About Onlook
Onlook is a local-first visual editor for React and TailwindCSS where the code, not a mockup file, is the source of truth. It's pitched as 'the developer tool for designers' — you drag, rearrange, and scale elements in a real component tree, and the underlying TSX and Tailwind classes update as you go. The editor pairs native design controls with AI: an AI chat panel reads your files and edits them (the vendor demo walks through fixing a masonry layout that breaks on mobile — the assistant reads ImageGrid.tsx, searches the columns config, and edits CSS breakpoints) and AI prototyping on an infinite canvas lets you craft and preview sites from scratch. Around that core you get reusable component swapping, branching with full revision history, and centralized theming through design tokens, color palettes, and typography. A layers and navigation-bar panel gives precise control across the React component tree. Onlook's open-source repo runs the whole thing locally for free; the hosted cloud editor is in closed beta and priced as custom 'For Teams'. Code you make is yours: export to your machine, publish to GitHub, or host at a link. It works with Next.js, React, Vite, Storybook, and shadcn/ui. In July 2026 Onlook launched Villainterest, adding real-time collaboration on design directly in the codebase with live preview and AI chat. Against Figma, the pitch is workflow placement rather than pixel fidelity — Figma stays safer for high-fidelity exploration, but Onlook removes the translation step entirely when your target is a live React codebase.
Behind the Verdict
Onlook's central claim — that the code is the source of truth — is the thing that separates it from Figma and the pile of AI website builders. You are not drawing boxes that someone later translates into JSX; you are manipulating a real React component tree, and Tailwind classes change as you drag, rearrange, and scale. That collapses the handoff step for teams whose target is already a React codebase running Next.js, Vite, Storybook, or shadcn/ui. The AI layer is not a generic chatbot bolted onto a canvas. The vendor's own walkthrough shows the assistant reading ImageGrid.tsx, searching the columns configuration, and editing the CSS breakpoints to fix a masonry layout that breaks on mobile — that is a file-aware edit loop, not a prompt-to-mockup toy. Alongside it, AI prototyping on an infinite canvas covers the earlier, looser stage where you want to craft and preview a website from scratch. Villainterest, launched July 2026, adds real-time collaboration in the codebase with live preview and AI chat, so critiques happen on the artifact rather than on screenshots. Strengths: real component-tree editing with a layers panel; branching and full version history so design iterations are version-controlled artifacts; centralized design tokens, palettes, and typography; reusable project templates across a team; and an open-source, self-hostable core so you can audit and run the whole thing locally. The code is yours — export locally, publish to GitHub, or host at a link. Weaknesses and where it does not fit: the hosted cloud editor is in closed beta and For Teams is custom-priced, so buyers cannot simply pick a seat count and check out today; engineering-heavy teams will self-host while they evaluate. It is unapologetically a React and TailwindCSS tool, so anyone without that background, or any team needing mobile and small-screen design editing, is off-target. For high-fidelity creative exploration, or for a no-code-only team, Figma and conventional builders remain the right home. Treat Onlook as the final mile between a design system and shipped components, not as a replacement for the open-ended sketch phase.
Researching Onlook? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Onlook actually fits — and what changes day-one when you adopt it.
You pull up a branch in the Onlook editor, drag and rearrange elements directly in the real component tree, adjust design tokens, and watch the TSX and Tailwind classes change as you go.
Outcome: You ship a layout change as a reviewable code diff instead of a static mockup that a developer has to translate.
You describe a masonry layout breaking on mobile in the AI chat; the assistant reads ImageGrid.tsx, searches the columns config, and edits the CSS breakpoints.
Outcome: The breakpoint fix lands in your branch with full revision history, ready to commit to GitHub.
Using Villainterest, teammates join the design branch in real time with live preview and AI chat, commenting on the actual artifact.
Outcome: Design review happens on the shipping component rather than on screenshots, so feedback and code stay in sync.
Use Cases
- Edit React components visually with real code output
- Use AI to fix responsive layout issues like masonry breaks
- Prototype and iterate on design system components in a live codebase
- Collaborate in real time on design branches with live preview and AI chat
- Generate and commit code changes directly to GitHub
- Self-host Onlook for full control over your design workflow
Models Under the Hood
as of 2026-10-04
Limitations
- Onlook is currently in closed beta; the hosted cloud version is sold as a custom-priced 'For Teams' plan handled through the vendor, while self-hosting is free via the open-source GitHub repository.
- It is a local-first visual editor built around React and TailwindCSS with code as the source of truth, so teams outside that stack are not the target.
- The full team workflow — SSO (SAML/OAuth), audit logs, and admin controls — sits on the For Teams tier rather than the self-hosted path.
as of 2026-09-28
Verification history
We have re-verified Onlook 7 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
Showing the 6 most recent of 7 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Onlook tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Self-Hosted
$0/mo
Ideal for
Individual designers and small React teams who are comfortable running and maintaining the open-source editor themselves.
What this tier adds
Starting tier: free self-hosting of the open-source repo with visual React/Tailwind editing, AI chat, branching, and design tokens.
For Teams (Cloud)
Custom
Ideal for
Larger product organizations that need a managed hosted editor plus SSO (SAML/OAuth), audit logs, and admin controls.
What this tier adds
Adds the hosted cloud editor (closed beta), team project templates, and advanced security controls over the free self-hosted plan; custom-priced.
Where the pricing makes sense
The company stage and team size where Onlook's pricing actually pencils out — and where peers do it cheaper.
Self-hosting Onlook is free, which suits individual designers and small React teams who can absorb running the editor themselves. The hosted cloud 'For Teams' plan is custom-priced and in closed beta, so budget-conscious teams will start open-source while teams that need SSO, audit logs, and admin controls negotiate directly. Compared with a paid Figma seat, Onlook's free path costs nothing but engineering time; compared with enterprise design platforms, its cost lands only once you need the
Setup time & first value
How long it actually takes to get something useful out of Onlook — broken out by persona, not the marketing-page minute.
Self-hosters can be editing within an afternoon: clone the open-source repo, run it locally, and point it at an existing React project. Hosted-cloud teams face a longer path — the editor is in closed beta and the For Teams plan is custom-priced through the vendor, so expect onboarding conversations before first value. Designers new to React or Tailwind should budget extra time to get comfortable
Switching to or from Onlook
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From Figma: rebuild key screens inside your React repo, then edit them in Onlook's component tree so the design lives in code rather than a separate mockup file.
- →From handoff spreadsheets and screenshot reviews: move critique into Onlook branches with full version history so design feedback attaches to real diffs.
- →From a plain VS Code workflow: keep your editor for logic and use Onlook for visual layout, token, and typography changes in the same component tree.
- ↗To Figma: export your components and reconstruct high-fidelity explorations where freeform creativity matters more than code fidelity.
- ↗To a no-code builder: if your team is not on React and Tailwind, rebuild in a no-code tool rather than carrying a component-tree workflow you cannot use.
- ↗To code-only editing: since the code is standard React and Tailwind, you can drop Onlook and continue in any editor without a migration step.
Integrations
Resources & Guides
Tutorials & Learning
YouTube returned 6 videos for “Onlook”, and we withheld 6: 6 could not be judged, because “Onlook” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Onlook.
Official links
Tools that pair well with Onlook
Common stack mates teams adopt alongside Onlook, with the specific reason each pairing earns its keep.
Figma
Figma is a collaborative browser-based design canvas where designers, developers, and AI agents work on the same file.
Subframe
Subframe is a design tool for your codebase — a visual canvas plus a coding agent that outputs React and Tailwind code you can edit.
MarsX
Open-source dev platform that combines no-code, full-code, and AI with reusable full-stack MicroApps.
Featured Head-to-Head Comparisons
Onlook vs Bito
Choose Bito if your team relies on AI coding agents across multi-repo systems and needs architectural context, impact analysis, and automated scoping. Choose Onlook if you're a designer or developer wanting a visual editor that writes real React/TailwindCSS code and bridges design-dev gaps.
Onlook vs Cognition Ai
For enterprise teams needing an autonomous engineer that plans, codes, and ships multi-step tasks with measurable ROI, Cognition AI is the clear choice backed by a $10M guarantee and recent $1B funding. For design‑focused React/TailwindCSS teams who want a visual editor that writes real code and bridges design‑dev gap, Onlook offers an open‑source, free alternative. Choose based on whether your priority is autonomous task execution or visual codebase editing.
Onlook vs Polycam
Choose Polycam if you capture the physical world — objects, rooms, drones — and need usable 3D models or floor plans. Choose Onlook if you ship React/TailwindCSS apps and want a visual designer that writes real code. They solve opposite problems; your choice depends entirely on whether your output is 3D geometry or production UI code.
Alternatives to Onlook
View all
Frequently Asked Questions
Categories
Best-of guides
Used Onlook? Help shape our editorial sentiment research.