Onlook
An open-source visual editor that lets designers edit a real React website by clicking and dragging — like Figma, but the changes go straight into the actual code.
🔗 Visit Onlook
Description
Normally a designer mocks up a screen in one tool (Figma) and a developer then rebuilds it in code — a slow hand-off where details get lost in translation. Onlook removes that gap: you edit the real website visually, clicking and dragging like in a design tool, and your changes are written directly into the actual React code. It's often described as 'Cursor for designers'.
Onlook is an open-source (Apache 2.0) visual editor for React codebases (Next.js, Vite, Storybook): live DOM editing, AI-assisted design suggestions and component generation, real-time collaboration and revision history — with the code as the single source of truth. The self-hosted version is free on GitHub (~26k stars); a hosted product is in closed beta.
💬 Our review
The short version: Onlook is for teams tired of the Figma-to-code hand-off — designers work directly in the real codebase, so what they design is what ships, with no separate rebuild step.
The 'code as source of truth' idea is genuinely compelling: it avoids the classic drift where the built product diverges from the mockup. Being open source (Apache 2.0) with strong GitHub traction is a real credibility signal and a hedge against lock-in. It sits in the hot design-to-code / AI-app-builder space alongside v0, Bolt.new and Lovable, but differentiates by editing an EXISTING codebase rather than generating throwaway prototypes. Honest caveats: the hosted product is still closed beta, so today you either self-host (which needs technical setup) or wait for access; it is React-only (no Vue/Svelte/plain HTML); and 'designers editing production code' is powerful but assumes a codebase already exists and a team comfortable with that workflow. Great fit for React product teams — not for non-code design work, where Figma still wins.
💰 Pricing
📊 Global score
🤖 AI-enriched data
Open-source self-hosted version free (GitHub). Hosted product in closed beta; pricing not public (enterprise custom).
Pros
Open source (Apache 2.0), strong GitHub traction — real hedge against lock-in
Edits an EXISTING React codebase, not throwaway prototypes — code stays the source of truth
Visual, Figma-like editing that removes the design-to-code rebuild step
Real-time collaboration + revision history for designer/developer teams
Cons
Hosted product still closed beta — self-host needs technical setup
React-only (no Vue/Svelte/plain HTML)
Assumes an existing codebase and designers comfortable near real components