Onlook

Cursor for Designers — visually edit your React codebase with AI.

Freemium· Free self-hosted (open source on GitHub); Cloud version pricing custom — contact sales / book a demo.Coding

Best for

Product teams shipping React/Next.js on Tailwind who want designers editing the live UI and committing clean code, not throwing Figma frames over the wall.

Skip if

Teams outside the React ecosystem, brand/marketing designers who never touch a repo, or shops that need a predictable, published SaaS price before piloting.

Onlook is a visual editor for React, Next.js, Vite and Storybook codebases that lets designers and product engineers manipulate a live application the way they would a Figma canvas — dragging, resizing, restyling and rearranging real components — while the underlying JSX/TSX and Tailwind classes update as the source of truth. Marketed as 'Cursor for Designers,' it pairs a WYSIWYG canvas with an AI chat pane that can generate new sections, refactor layouts, apply brand tokens (colors, typography, spacing) and wire up components from a prompt, then commits the diff back to your repo so engineers pick up clean code rather than red-lined screenshots. Typical workflows include: opening a Next.js app locally or from GitHub, selecting a hero or card, asking the assistant to 'make this responsive and match the brand palette,' previewing the result live, and exporting or publishing to a custom domain. Because designs are the code, revision history, component reuse, and Storybook integration all behave like normal Git objects rather than parallel design files that drift. The project is open source (25k+ GitHub stars) with a self-hosted path for teams that want to run it against their own model keys, and a managed cloud version for teams that prefer not to host. It slots most naturally into product teams already shipping React on the Vercel/Next stack who are tired of the Figma-to-code handoff and want designers touching real UI without breaking the build.

Editor's take

Onlook is the most credible attempt yet at collapsing the Figma-to-React handoff — the fact that the canvas edits real JSX (not an intermediate representation) is what makes it worth the pilot. I'd self-host it against a Next.js repo before touching the cloud version, mostly because the pricing opacity and undisclosed model backend are the two things that would give a CTO pause. If you're already a Cursor shop, this is the designer-facing sibling.

— The AI Tool Bible editorial team

Pros

✅ Edits the real React/Next.js codebase — no Figma-to-code translation step or drifting design files.
✅ Open source with 25k+ GitHub stars and a self-hosted option, so teams can bring their own model keys and keep code private.
✅ Visual canvas with drag/resize/restyle that maps cleanly to JSX + Tailwind, making the diff readable to engineers.
✅ AI chat can generate components, apply brand tokens, and refactor layouts from natural-language prompts.
✅ First-class support for the modern React stack: Next.js, Vite, Storybook, and component reuse across the tree.
✅ Publish/export flow with custom domains means designers can ship without waiting on a dev deploy.

Cons

⚠️ Cloud pricing is not published — teams have to book a demo to get numbers, which slows evaluation.
⚠️ Locked to the React ecosystem; Vue, Svelte, Angular, or plain HTML projects are not supported.
⚠️ Underlying model provider is not disclosed on the marketing site, so cost and quality of AI features are opaque until you try it.
⚠️ Still a young product — self-hosted setup and multi-user collaboration are less battle-tested than incumbent design tools.
⚠️ Non-technical designers on legacy codebases with hand-rolled CSS or older React patterns may find AI edits produce noisy diffs.

Use cases

Visual editing of a Next.js marketing siteDesigner-driven component refactors in a shared React repoApplying brand tokens across a Tailwind codebasePrototyping new UI sections from natural-language promptsStorybook-driven component library maintenanceHandoff-free design-to-production for small product teamsPublishing landing pages to a custom domain without a dev deploy