Onlook
Visual editor that writes real React & TailwindCSS code
Onlook is a promising open-source editor for React/Tailwind teams wanting design and code in one place. The AI chat for responsive fixes is genuinely useful, but it's beta and desktop-focused. If you live in React and want a code-first design tool, the free self-hosted tier is worth trying. For high-fidelity mockups, Figma plus handoff may be safer.
Verified 4d ago · liveness 75/100 · cite: rightaichoice.com/tools/onlook
- Designers who want to work directly in the codebase
- React developers building design systems
- Product teams aiming for a single source of truth between design and code
- Teams using TailwindCSS who want a visual editor
- Beginners unfamiliar with React or TailwindCSS
- Users needing mobile design editing (optimized for larger screens)
- Non-technical teams that rely on no-code only
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 you're not using React or TailwindCSS, if you need mobile editing, or if you prefer a design-first tool like Figma with no-code handoff.
Cloud hosting has no public pricing; you must book a demo to get a quote, so budgeting is unclear until you talk to sales.
Onlook's self-hosted free tier is a strong entry point for individual developers and small teams on a budget, undercutting paid tools like Figma. The custom-priced For Teams cloud tier is best for larger teams needing SSO and audit logs, but you'll need to negotiate pricing, whereas Figma has transparent per-seat plans.
In short
Onlook — Visual editor that writes real React & TailwindCSS code. Best for Designers who want to work directly in the codebase, React developers building design systems, Product teams aiming for a single source of truth between design and code. Free to use.
What's new in Onlook
Checked 2 days agoAcross 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.
- +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: August 2026
How we score →Key Features
- Visual editor for React and TailwindCSS
- Drag-and-drop element manipulation
- Direct editing of components and styles
- AI chat for styling, layout, and responsive fixes
- AI prototyping on an infinite canvas
- Live preview of React component tree
- Branching and version control
- Reusable project templates
- Centralized design tokens, color palettes, typography
- Works with Next.js, React, Vite, Storybook, shadcn/ui
- Open-source and self-hostable on GitHub
- Export code to local machine, GitHub, or hosted link
- Responsive breakpoint fixes via AI
- Design with code as source of truth
- Collaborate on design directly in codebase with live preview
About Onlook
Onlook is an open-source visual editor for React and TailwindCSS, built for teams that want to design directly in their real codebase. It works as a 'Cursor for Designers,' letting you manipulate elements with drag-and-drop, scale, and rearrange them while the underlying code updates in real time. Because the code is the source of truth, every visual tweak translates into production-ready React and TailwindCSS code that you fully own. This makes it ideal for product teams that are tired of the design-to-development handoff gap. Onlook's core is an AI-powered infinite canvas where you can craft, preview, and iterate on websites and prototypes. The AI chat assists with styling, layout, and responsive fixes — for example, it can fix a masonry layout's mobile breakpoints after you describe the problem in plain English. Its native design tool features work 1:1 with code, offering direct editing of components, a live preview of the React component tree, and precise control over every element. Onlook also includes branching and version control, reusable project templates, and centralized theming with design tokens, color palettes, and typography management. The tool is designed to work with Next.js, React, Vite, Storybook, and shadcn/ui, making it a natural fit for modern web development stacks. You can export your code to your local machine, publish it to GitHub, or host it at a link. While it's optimized for larger screens and best suited for React/TailwindCSS projects, Onlook can also be used for presentations, mockups, and any visual web work. It's currently in closed beta, with a free self-hosted option available on GitHub for those who want to run it themselves. Compared to alternatives like Figma, Onlook keeps design and code in one place, eliminating the handoff gap and making the product itself the canvas. It's a developer-first tool that empowers designers to code without knowing syntax, making it a compelling choice for teams already committed to React and
Behind the Verdict
When you design in Onlook, you're designing the real product — the source of truth is the code itself. That's the core pitch, and it's a compelling one for teams that are tired of Figma mockups that never quite match the final implementation. If your stack is React and TailwindCSS, Onlook removes the handoff gap entirely: what you see is literally what you get, because the editor manipulates the actual codebase. The AI chat is a standout feature. It handles styling, layout, and responsive fixes through natural language prompts — like asking it to fix a masonry layout's mobile breakpoints. In the vendor page demo, it correctly identified that CSS columns weren't adapting to smaller screens and updated the responsive breakpoints. That kind of targeted help is genuinely useful for designers who don't want to dive into the code. But there are real limitations. Onlook is currently in closed beta, so you'll need to join a waitlist or book a demo for the hosted cloud version. The free tier is self-hosted on GitHub, which is great for developers but not ideal for non-technical designers who just want to point and click. Also, the tool is optimized for larger screens, so mobile design editing isn't its strong suit — a notable gap for teams that do mobile-first work. Compared to Figma, Onlook is a different beast. Figma is a standalone design tool that requires a handoff process; Onlook drops you straight into the codebase. If you're a designer who prefers pixel-perfect mockups without touching code, Figma remains the safer choice. But if you want to eliminate the design-to-development bottleneck and you're all-in on React/TailwindCSS, Onlook is worth a serious look. One caveat: as an open-source project, the feature set and roadmap can shift. The recent 'Villainterest'
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 need to fix a responsive layout bug in a React component.
Outcome: With Onlook, you use the AI chat to describe the issue (e.g., 'masonry breaks on mobile'), and it updates the code with proper breakpoints, saving you manual debugging time.
You want to prototype a new feature in the actual codebase.
Outcome: Using Onlook's infinite canvas and drag-and-drop, you assemble a prototype with real React components, and the AI chat helps with styling, so developers get production-ready code without handoff.
You need to manage design changes across your team.
Outcome: Onlook's branching and version control let designers work on branches, and the recent Villainterest feature enables real-time collaboration, so your team designs together directly in the codebase with live preview.
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 with developers using version-controlled design branches
- 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-08-21
Limitations
- Onlook is currently in closed beta and optimized for larger screens.
- Self-hosting is available for free on GitHub; cloud hosting for teams requires booking a demo.
- The tool is best suited for web experiences and focuses on React & TailwindCSS codebases.
as of 2026-08-13
Verification history
We have re-verified Onlook 5 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-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
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
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 developers or small teams comfortable with setup and wanting full control over code and data.
What this tier adds
Free entry point via GitHub, includes core visual editing, but lacks cloud features like SSO and audit logs.
For Teams (Cloud)
Custom
Ideal for
Product teams needing collaboration, version control, and enterprise security in a hosted environment.
What this tier adds
Adds Project Templates, Branching & Version Control, Theming, SSO, audit logs, and admin controls on top of self-hosted features.
Where the pricing makes sense
The company stage and team size where Onlook's pricing actually pencils out — and where peers do it cheaper.
Onlook's self-hosted free tier is a strong entry point for individual developers and small teams on a budget, undercutting paid tools like Figma. The custom-priced For Teams cloud tier is best for larger teams needing SSO and audit logs, but you'll need to negotiate pricing, whereas Figma has transparent per-seat plans.
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-hosting Onlook from GitHub takes about 30-60 minutes for a developer, depending on environment. For the cloud beta, you book a demo and get onboarded by the team, typically within a day. Designers can start editing within minutes once the codebase is connected.
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: Export your design as code or manually recreate key components in Onlook. There's no one-click import, so expect a manual setup.
- →From a static mockup: Use Onlook's AI chat to generate initial components based on your design images.
- ↗To Figma: Export your Onlook code to Figma is not supported directly; you'd need to recreate designs manually or use plugins.
- ↗To another code editor: Since Onlook writes standard React/Tailwind code, you can continue editing in any IDE like VS Code.
Integrations
Resources & Guides
Tutorials & Learning
Official links
Tools that pair well with Onlook
Common stack mates teams adopt alongside Onlook, with the specific reason each pairing earns its keep.
Featured Head-to-Head Comparisons
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.
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.
Alternatives to Onlook
View all
Figma
Collaborative cloud design platform with an AI-native canvas for design, code, and AI.
Locofy Pro
Convert Figma & Penpot designs into production-ready frontend code with plugin, CLI, MCP, and URL workflows.
Frequently Asked Questions
Categories
Best-of guides
Used Onlook? Help shape our editorial sentiment research.