Onlook

Onlook is a web-based visual code editor for designers and product teams working directly in real codebases. It supports live React editing, AI-assisted changes, and open-source self-hosting.

AI Design Assistant AI Developer Tools AI App Builder

Visit Website

Onlook

Overview

Onlook is a visual code editor for designers and product teams who want to work directly in a real codebase. It combines a canvas-based editing experience with code-first output, so the project’s code stays the source of truth while teams design, prototype, and iterate.

The site positions Onlook around live React components, an infinite canvas, and AI-assisted editing. It also emphasizes team use, real design systems such as Storybook, and open-source availability, with a hosted option available through the company’s sales flow.

Features

Visual editing on an infinite canvas

Work on an infinite canvas while editing live React components, with the code base remaining the source of truth.

AI-assisted changes

Use chat to modify selected elements and generate code assistance directly in the editing workflow.

Team collaboration

Collaborate with teammates in real time and keep work aligned to the same underlying product code.

Design system alignment

Bring in your team’s real design system, including Storybook-based components, so new work matches existing patterns.

Branching and version control

Manage branches and version history so teams can organize work and review changes across projects.

Code ownership and export options

Export work locally, publish it to GitHub, or host it at a link, with open-source access for teams that want to customize the tool.

Use cases

Website and prototype creation
Create websites and prototypes directly in a real codebase when the design needs to reflect implementable product work instead of disconnected mockups.
Component-level iteration
Use the canvas and chat workflow to iterate on live React components while keeping implementation details visible as you work.
Design-system-driven collaboration
Bring a shared design system into the editor so teams can reuse established components and keep new work consistent with existing UI patterns.
Team workflow and versioned editing
Use branching, version history, and collaboration features to review changes with teammates and manage parallel work on the same project.
Self-hosted and code-owned delivery
Self-host the open-source product or export work to a local machine, GitHub, or a hosted link when you need ownership over the code.

Pros and Cons

Pros

Works directly in a real codebase rather than a separate mockup-only environment.
Supports live React component editing on an infinite canvas.
Keeps code as the source of truth, which helps preserve implementation fidelity.
Can align with an existing design system, including Storybook-based components.
Offers open-source self-hosting and export paths to local machine, GitHub, or a hosted link.

Cons

The hosted cloud version does not show public self-serve checkout on the site; users are directed to contact the team or book a demo.
The public FAQ and pricing pages provide only limited technical documentation, so setup and workflow details are still somewhat high level.

FAQ

What is Onlook?

Onlook is an open-source visual editor for websites. The source describes it as a way for teams to create and style prototypes and websites without needing coding knowledge, while still working from code as the source of truth.

What can I use Onlook for?

The source says you can use Onlook to create websites, prototypes, user interfaces, and other visual work such as presentations and mockups. It is positioned around designing directly in real codebases.

Is there a free version of Onlook?

Yes. Onlook can be self-hosted for free on GitHub. For the hosted cloud version, the site asks users to contact the team or book a demo.

How do I use Onlook?

Onlook says you can design on an infinite canvas, select individual elements, and use chat to modify them. The product emphasizes that the code remains the source of truth throughout the workflow.

What pricing options does Onlook offer?

The pricing page lists a free Starter tier for individuals and small teams, and a Teams option with custom pricing. It also says existing paid plan users can continue using Onlook.