What is Onlook?
Onlook is a visual editor for React and Next.js codebases that gives designers a Figma-like canvas while keeping real source code as the source of truth. Teams edit components, theming, and layouts directly, then commit and ship through normal Git workflows. It integrates with shadcn/ui, Storybook, and standard design-system tooling.
Coding agents and AI developer tools for writing, reviewing, debugging, and shipping software.
See the full AI Coding guide to compare more tools, buyer criteria, and related workflows.
Use cases to evaluate
Designers editing live React components without filing developer tickets
Prototyping new pages or marketing sites directly inside the production repo
Maintaining design-system tokens and theming across shadcn/ui projects
Publishing branches to custom domains for stakeholder review
Fit to evaluate
Product design teams working in React/Next.js codebases
Startups that want designers shipping code without a separate handoff
Design-system maintainers using shadcn/ui or Storybook
Agencies prototyping client sites that ship as real apps
Business fit
Right for you if your designers and developers share a React/Next.js codebase and you are tired of round-tripping Figma mockups into production components. Skip if you do not use React or if your stack is largely no-code. The self-hosted GitHub version is free, which makes it cheap to pilot before committing to the Teams plan. Information Gain: Onlook edits the real codebase rather than a separate design file, so there is no design-to-code translation step.
How to evaluate Onlook
Use this category when software delivery speed, code review, or developer leverage is a business constraint.
Confirm the exact workflow
Map Onlook to one concrete workflow first, such as designers editing live react components without filing developer tickets. Avoid buying before the owner, trigger, output, and success metric are clear.
Check category fit
Test with your actual repository and review diff quality.
Compare practical alternatives
Shortlist Onlook against Codex, Claude Code, Cursor so the decision is based on fit, effort, and workflow ownership rather than brand recognition alone.
Validate cost and rollout effort
Self-hosted version free on GitHub. Cloud Teams plan uses custom pricing tailored to each team; Onlook directs prospects to contact sales or book a demo for a quote. No public per-seat tier is published. Also confirm implementation time, support needs, and whether the technical setup matches your team.
Compare Onlook with alternatives
Use this quick comparison before booking demos or moving data into a new system.
| Primary workflow | Designers editing live React components without filing developer tickets, Prototyping new pages or marketing sites directly inside the production repo |
|---|---|
| Best-fit team | Product design teams working in React/Next.js codebases, Startups that want designers shipping code without a separate handoff |
| Implementation effort | Technical setup and maintenance profile |
| Pricing check | Free plan + paid plans |
| Closest alternatives | CodexClaude CodeCursorGitHub Copilot |
Onlook pricing
| Model | Free plan + paid plans |
|---|---|
| Snapshot | Self-hosted version free on GitHub. Cloud Teams plan uses custom pricing tailored to each team; Onlook directs prospects to contact sales or book a demo for a quote. No public per-seat tier is published. |
| Checked |
Common questions about Onlook
What is Onlook?
Onlook is a visual editor for React and Next.js codebases that gives designers a Figma-like canvas while keeping real source code as the source of truth. Teams edit components, theming, and layouts directly, then commit and ship through normal Git workflows. It integrates with shadcn/ui, Storybook, and standard design-system tooling.
What is Onlook used for?
Common use cases: Designers editing live React components without filing developer tickets; Prototyping new pages or marketing sites directly inside the production repo; Maintaining design-system tokens and theming across shadcn/ui projects; Publishing branches to custom domains for stakeholder review.
How much does Onlook cost?
Self-hosted version free on GitHub. Cloud Teams plan uses custom pricing tailored to each team; Onlook directs prospects to contact sales or book a demo for a quote. No public per-seat tier is published.
Who is Onlook best for?
Onlook fits Product design teams working in React/Next.js codebases, Startups that want designers shipping code without a separate handoff, Design-system maintainers using shadcn/ui or Storybook, Agencies prototyping client sites that ship as real apps. Right for you if your designers and developers share a React/Next.js codebase and you are tired of round-tripping Figma mockups into production components. Skip if you do not use React or if your stack is largely no-code. The self-hosted GitHub version is free, which makes it cheap to pilot before committing to the Teams plan. Information Gain: Onlook edits the real codebase rather than a separate design file, so there is no design-to-code translation step.
What are alternatives to Onlook?
Common alternatives to Onlook include Codex, Claude Code, Cursor, GitHub Copilot, Replit, Windsurf.