Onlook

A free, local-first visual code editor for designers to craft React components on an infinite canvas.

Overview

Onlook is a visual code editor designed for designers to work directly in real React codebases. It provides an infinite canvas interface where designers can edit live components using their team's actual design system, with code as the source of truth rather than mockups.

The tool bridges the gap between design and development by eliminating the need to rebuild mockups. Designers can prototype, iterate, and ship code directly without requiring deep coding knowledge. It supports popular frameworks like React, Next.js, and Vite, and integrates with Storybook and shadcn/ui design systems.

Onlook is available as a free self-hosted version on GitHub, with a hosted cloud version available by contacting the team. The project is open-source and community-driven, emphasizing transparency and flexibility for teams with unique development workflows.

Key features

Visual editing on infinite canvas
AI-assisted design and code generation
Real-time React component editing
Design system integration
Code as source of truth
Storybook support
shadcn/ui compatibility
Team collaboration
Local-first architecture
Open-source

Pros

No mockup-to-code rebuild cycle
Design directly in real codebase
Works with existing design systems
AI assistance for faster iteration
Code ownership and export options
Free self-hosted version available
Supports popular frameworks and tools
Familiar design tool hotkeys

Cons

Hosted cloud version requires contacting team for pricing
Primarily focused on React/web experiences
Learning curve for designers unfamiliar with code concepts
Setup required for self-hosted version

Use this if

You are a designer who wants to work directly in code, need to eliminate design-to-development handoff delays, or want to design with your team's actual design system and components.

Skip this if

You need a traditional design tool for mockups and wireframes, work primarily with non-web platforms, or prefer design-code separation in your workflow.

Best for

Designers working directly in codeTeams bridging design and developmentReact component prototypingVisual iteration on real productsTeams using Storybook design systems

Alternatives

Figmav0FramerAdobe XDPenpot

Compare Onlook alternatives

More Design

Compare all

Aura

Free online vector editor for creating logos, icons, and graphics with SVG support.

Mokkit

Create animated device mockups from screenshots in seconds, no design skills needed.

AI Photo Editor

Web-based AI photo editor for background removal, object erasing, upscaling, and generative image editing.

LottieFiles

Platform for discovering, editing, and shipping lightweight Lottie motion graphics.