Onlook
by Onlook · Visual code editor for designers and product managers
BenchRank score
Screenshots of Onlook
Homepage
Overview
Onlook is a visual editor that works against a React codebase, so changes made on the canvas are written as code. You can import an existing codebase, drag and edit elements, manage reusable components and brand fonts and colours, and ask an in-editor AI chat for changes. Projects support real-time team collaboration, revision history, and publishing to a custom domain.
- Best for
- Design and product teams editing a real React codebase visually rather than a separate design file
- Pricing
- No prices are shown: Onlook can be self-hosted for free from GitHub, while the hosted cloud version requires contacting the team or booking a demo.
- Runs on
- WebSelf-hosted
Strengths and trade-offs
Strengths
- Edits are made in the real React codebase, not a separate file
- Open source and self-hostable for free from GitHub
- Works with Next.js, React, Vite, Storybook and shadcn/ui
- Code exports locally, to GitHub, or to a hosted link
Trade-offs
- Hosted cloud version requires contacting the team; no prices published
- Aimed at React-based web codebases, not other stacks
- Free route means self-hosting and maintaining the editor yourself
How Onlook markets itself
A structured read of the promise, proof and page design on Onlook’s captured homepage.
Homepage capture
“Cursor for Designers”
- Angle: Category creation
- Hero: Product screenshot
Pricing
Published plans and prices from Onlook’s own pricing page.
How this score is made up
Each dimension is scored out of 100 and combined into the headline score using fixed weights.
MCP support
Whether an agent can drive the product through the Model Context Protocol, and how much setup that takes.
Documentation
Publicly reachable docs — coverage, freshness, code samples and machine readability.
Agent friendliness
How readable the site is to an automated client: llms.txt, structured data, server-rendered content, crawler access.
Pricing transparency
Whether real prices are published, self-serve signup exists, and usage costs are knowable without a sales call.
Changelog
A public, dated record of what shipped and when — the clearest signal that a product is still alive.
Marketing site structure
Whether the site answers a buyer's questions: clear positioning, the pages that matter, and accessibility.
Page speed
How fast the site loads for real visitors: Chrome UX Report 75th-percentile LCP, INP and CLS, with a Lighthouse mobile run standing in where a site has too little traffic for field data.
Operational trust
Status page and incident history, security disclosure, compliance and data-processing documentation.
Measured, but not part of the score
Useful to know, but not a mark for or against the product — so these do not affect the ranking.
Openness
Source availability, self-hosting, data export and open standards. Scored and shown, but not part of the composite — paid SaaS is not worse for being paid SaaS.
Maintenance
Release cadence and repository activity. Scored and shown, but not part of the composite — it is only measurable for open repositories.
This doesn’t look right — report a problem with Onlook’s score
Where this comes from
The Onlook pages BenchRank reads when it scores the product — its documentation, release notes, status and security pages, and its repository where there is one.
Alternatives in Frameworks & Libraries
Ranked 1
81.9 — BenchRank score out of 100Encore
Encore · Declare backend infrastructure in Go or TypeScript, deploy to your own cloud
Best for: Teams building Go or TypeScript backends on their own AWS or GCP without a platform team
Ranked 2
80 — BenchRank score out of 100Convex
Convex · Reactive TypeScript backend with database, functions, sync and search
Best for: Teams building TypeScript apps that want database, functions, sync and file storage in one backend
Ranked 3
78.9 — BenchRank score out of 100Builder.io
Builder · Collaborative platform for building software with AI agents
Best for: Product teams wanting designers, PMs and marketers to edit the real codebase alongside engineers
Is this your product?
Claim Onlook to manage its profile. Claiming lets you suggest edits to the descriptive fields — it never changes scores or rankings.