What

Onlook is a visual design canvas that connects directly to an existing frontend codebase. It is built for designers and product teams who want to work with real UI components instead of static mockups, then turn visual changes into pull requests that engineers can review and merge.

The product appears positioned between design tooling and developer tooling. Its core workflow is to let users design on an infinite canvas, inspect layers and components, use AI with project context, and make changes against real React, Next.js, or CSS-based apps without rebuilding screens separately in a traditional design tool.

Features

Visual editing on an infinite canvas — Users can drag, resize, and arrange interface elements visually while seeing the underlying code update in parallel.
Works with real components — Designers use the same buttons, cards, layouts, and design system elements already present in the codebase, which reduces translation between design and implementation.
AI with project context — The chat can reference images, mockups, and docs so AI suggestions are based on what the user is viewing rather than generic prompts.
Design system guardrails — AI is constrained by existing colors, fonts, and tokens to help keep generated changes aligned with the current brand system.
Codebase connection and PR workflow — Onlook connects to existing React, Next.js, and stated CSS apps, and supports pushing changes to GitHub as pull requests instead of exporting handoff specs.
Team collaboration tools — Shared canvases, spatial comments, and revision history support collaborative design work around live product surfaces.

Helpful Tips

Evaluate Onlook primarily on teams that already have a defined component library, since its value depends on working with real existing UI rather than generating an entirely new design system.
Confirm how well the current codebase is structured before rollout; inconsistent components or weak design token usage may limit the quality of visual editing and AI guidance.
Use it to shorten designer-to-engineer handoff cycles, but keep engineering review in place because the product is designed to submit PRs, not bypass code review.
Test its fit first on a contained workflow such as marketing pages, dashboards, or internal tools where component reuse is high and visual iteration is frequent.
The page states support for React, Next.js, and “any CSS app,” so teams with other frontend stacks should validate compatibility carefully before broader adoption.