#66 in Frameworks & LibrariesUpdated 2026-08

Onlook

by Onlook · Visual code editor for designers and product managers

24 — BenchRank score out of 100

Homepage
Pricing page

Visit website See full Frameworks & Libraries ranking

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 this score is made up

Each dimension is scored out of 100 and combined into the headline score using fixed weights.

MCP support: 0 out of 100
Documentation: 0 out of 100
Agent friendliness: 72 out of 100
Pricing transparency: 30 out of 100
Changelog: 25 out of 100
Marketing site structure: 55 out of 100
Operational trust: 0 out of 100

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: 60 out of 100
Maintenance: 100 out of 100

This doesn’t look right — report a problem with Onlook’s score

Alternatives in Frameworks & Libraries

Ranked 1
81.6 — BenchRank score out of 100
Encore
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
78.9 — BenchRank score out of 100
Builder.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
Ranked 3
78.6 — BenchRank score out of 100
Convex
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