Onlook

Onlook is an open-source visual code editor that lets designers work directly in real React codebases.

Onlook is a visual code editor for designers to craft experiences in code with AI assistance. It operates as a local-first editor where the code remains the source of truth. Users can edit live React components on an infinite canvas, utilizing their team's real Storybook design system. The tool is designed to bridge the divide between design and development by treating code as the native medium. Users can export code locally, publish to GitHub, or host it at a link.

Onlook at a glance

Best for: Designer, Software engineer
Runs on: Web, self-hosted, open source
Pricing: Free to self-host on GitHub; custom pricing for teams in closed beta
Released: June 2024
Category: AI coding tool
Website: onlook.com

Key features

Infinite canvas for visual editing
Live React component editing
Storybook design system integration
AI assistance for design and feedback
Version history and progress revert
Customizable reusable components
Brand colors and typography management

Use it for

Edit live React components visually
Prototype and create websites from scratch
Manage versions and revert progress
Export code to local machine or GitHub

Alternatives to Onlook

tldraw — Provides a production-ready infinite canvas foundation for React applications.
In App Editor — Add visual editing to any website without a separate server.
Illos.dev — Teach your coding agent to generate consistent animated illustrations.
Tambo — Connects existing React components directly to AI agents without rebuilding.
Puck — Embeds directly into any React application for users, teams, and AI agents.
Skisso — Generates exact CSS and text diff patches for coding agents directly from the browser
Libraries.dev — Prompt-based UI libraries that coding agents can install and configure directly
OpenCode — Works with 75+ model providers, local models, and existing subscriptions
Whiteboard by /dev/fast — Review software architectural changes, agent trajectories, and diffs in one place.
Autoloom — It embeds engineering judgment, change necessity checks, and evidence-backed delivery into automated coding.
PulseDev — Edits local source files directly through existing coding agents based on visual web clicks.
Woml — Combine readable HTML-inspired markup with JavaScript logic and managed durable execution.

All Onlook alternatives