Onlook

Onlook is a browser-based visual code editor for React applications that eliminates the gap between design and engineering. It instruments your Next.js and TailwindCSS codebase at the AST level, mapping every rendered DOM element back to its exact source location. When you drag, resize, or restyle an element in the Figma-like canvas, Onlook rewrites the corresponding JSX and Tailwind classes in real time — and when you use the AI chat, it runs code-modifying tools directly inside the same sandboxed container.

The editor is built around a branching model: each design experiment lives in its own isolated sandbox, and checkpoints let you save and restore work without affecting the main branch. An embedded code editor (CodeMirror) sits side-by-side with the visual canvas so developers can drop into raw code at any time. The project ships with GitHub integration for importing existing codebases, a one-click deploy flow via Freestyle hosting, and custom domain support — making it a full-cycle design-to-production environment.

Under the hood, Onlook is a Bun-managed monorepo combining a Next.js web application, a Supabase backend, a Drizzle-powered database layer, and more than fifteen focused packages covering AI streaming, AST parsing, font management, image serving, RPC routing, and Stripe billing. The AI layer uses the Vercel AI SDK with OpenRouter as the model gateway, routing CREATE and FIX tasks to GPT-5 and conversational EDIT and ASK tasks to Claude Sonnet, with Morph and Relace as fast code-apply providers.

Onlook is in early access for its hosted cloud product while remaining fully open source under Apache 2.0. It positions itself as a direct open-source alternative to Bolt.new, Lovable, v0, Figma Make, and Webflow for teams that want design velocity without sacrificing code ownership.

What You Get

• Visual DOM editor with AST-level code sync - Every drag, resize, and style change is written directly to the React source via Babel AST manipulation, keeping the codebase as the single source of truth rather than a secondary representation.
• Multi-mode AI chat with model routing - Three distinct chat modes (Create, Edit, Ask) automatically select the optimal LLM — GPT-5 for creation and fixing, Claude Sonnet for editing — with a full toolset for file reads, glob/grep searches, bash commands, and web scraping.
• Branching and checkpoint system - Design branches are fully isolated sandboxes; checkpoints save restore points so you can experiment with layouts or refactors without risking the working version.
• Embedded code editor with live preview - CodeMirror 6 renders side-by-side with the visual canvas, letting developers inspect or hand-edit the exact file and line that the visual selection maps to.
• One-click deploy with custom domains - Freestyle hosting generates shareable preview links and supports custom domain configuration with DNS verification, going from canvas to public URL without leaving the editor.
• GitHub project import and PR generation - Import any existing Next.js + Tailwind repository from GitHub and generate pull requests from design changes, fitting into existing engineering workflows.
• Supabase authentication and Drizzle database - Built-in user auth, project storage, and database access through a fully managed Supabase backend with typed Drizzle ORM schemas and migration scripts.
• Self-healing AI tool calls - When a model emits a malformed tool invocation, a lightweight nano model repairs the argument schema automatically before the call is retried, preventing workflow interruptions.

Common Use Cases

• Building a landing page from a text prompt - A solo founder describes a product page in the AI chat; Onlook’s Create mode scaffolds the full Next.js component tree with Tailwind styling, which the founder then fine-tunes visually before deploying to a custom domain in minutes.
• Iterating on a design system without breaking code - A designer selects typography tokens and spacing variables in the visual panel while the developer watches the Tailwind config and component files update in real time, eliminating the back-and-forth review cycle.
• Prototyping responsive layouts with AI-assisted fixes - A frontend engineer describes a mobile breakpoint bug in the chat; the AI reads the component file, applies a targeted Tailwind change using Morph fast-apply, and the visual canvas immediately reflects the corrected layout.
• Running parallel design explorations with branches - A product team creates three branch sandboxes to test competing navigation patterns, compares them live, and merges the winning branch back into the main codebase without any manual conflict resolution.
• Importing and extending an existing React project - An agency imports a client’s GitHub repository, uses Onlook’s layer browser to navigate the component tree, visually adjusts colors and spacing to match a new brand guide, then generates a PR for the client to review.

Under The Hood

Architecture Onlook is organized as a Bun monorepo with two primary applications — a Next.js web client and a Supabase backend — and more than fifteen focused internal packages. The central abstraction in the web client is the EditorEngine, a MobX observable singleton that composes twenty-five specialized manager classes covering canvas state, element selection, AST operations, branching, sandbox lifecycle, style application, font management, image handling, and overlay rendering. This manager-of-managers pattern keeps each domain isolated and testable while sharing a single reactive context. Inter-process communication between the editor frame and the sandboxed user app frame is handled through Penpal, a postMessage RPC library, enabling type-safe bidirectional calls without shared memory. The sandbox layer is abstracted behind a CodeProvider interface with two concrete backends: a CodeSandbox SDK provider for cloud containers and a NodeFs provider for local development, allowing the same editor logic to target either runtime without changes.

Tech Stack The frontend runs on Next.js 15 with the App Router, tRPC for end-to-end type-safe API calls, MobX React Lite for granular reactive state, and CodeMirror 6 with language packs for the embedded code editor. The backend is Supabase, providing PostgreSQL, authentication, object storage, and Edge Functions written in Deno. The data layer uses Drizzle ORM with migration and seeding scripts managed through Bun. AI capabilities are powered by the Vercel AI SDK routing through OpenRouter to Claude Sonnet 4.5 for conversational editing and GPT-5 for generation and fix tasks; Morph and Relace serve as fast code-apply providers that instantly materialize code change suggestions. Instrumentation is handled through OpenTelemetry with Langfuse for LLM trace correlation. Freestyle provides one-click app hosting and custom domain management. The monorepo build system relies entirely on Bun workspaces for dependency resolution and script orchestration.

Code Quality The codebase demonstrates strong engineering discipline across its surface area. The parser package maintains a golden-file test harness where each test case pairs an input JSX/TSX file with an expected output, making regression detection precise and deterministic. The ai package tests token counting and code-apply behavior with fixture-driven cases. The web client’s test suite covers cache strategies, sandbox environment resolution, frame navigation, and message conversion logic using Vitest. TypeScript strict mode is enforced across all packages with Drizzle schemas providing additional runtime-level type guarantees. ESLint with per-workspace configs enforces consistent style. The primary area of complexity is the large EditorEngine class with its twenty-five sub-managers, which carries meaningful cognitive load even with the domain decomposition, though each manager is independently testable.

What Makes It Unique The defining technical differentiator is Onlook’s bidirectional DOM-to-code bridge implemented without a custom DSL or intermediate format. At startup, the parser instruments every JSX element with a unique data-onlook-id attribute keyed to its AST location; when the user selects an element in the visual canvas, the editor looks up the exact AST node and rewrites only the affected JSX attributes or Tailwind class strings — preserving all comments, formatting, and surrounding code. The AI system compounds this with a multi-mode routing architecture where tool selection changes per chat type: ASK mode receives only read-only tools (list files, read file, grep, web search) while EDIT and CREATE modes receive the full toolset including file writes, bash execution, and terminal commands. Self-healing tool call repair using a lightweight model for schema correction is built directly into the streaming pipeline. The branching system provides true sandbox isolation per design branch rather than simple git-branch switching, meaning each branch can be running simultaneously in different containers for side-by-side comparison.

Self-Hosting

Onlook is distributed under the Apache License 2.0, one of the most permissive enterprise-grade open-source licenses available. It allows unrestricted commercial use, modification, and distribution with no copyleft obligations, meaning organizations can self-host, customize, and integrate Onlook into proprietary internal tooling without licensing fees or code-disclosure requirements. The only obligations are preserving attribution notices and the license file in any distributed copy.

Self-hosting Onlook requires operating several moving parts: a Bun-based Next.js web server (containerizable via the included Dockerfile), a Supabase project for authentication, database, and file storage, and external API credentials for OpenRouter (LLM gateway), Morph and Relace (fast code-apply), CodeSandbox (sandboxed dev containers), Stripe (billing), and Freestyle (hosting). Teams running Onlook internally must manage all infrastructure uptime, database backups, security patching, and version upgrades themselves. The sandbox infrastructure dependency on CodeSandbox SDK is a notable external service requirement that is not trivially replaced without significant engineering effort.

The hosted product at onlook.com is in early access via a waitlist, with a team/enterprise tier that adds dedicated support, an account manager, advanced usage analytics, SSO (SAML/OAuth), audit logs, custom integrations, and unlimited projects. Self-hosters give up these managed operational benefits as well as the curated deployment and domain-management UI powered by Freestyle’s hosted infrastructure. Teams evaluating self-hosting should weigh the engineering cost of integrating and maintaining the full service mesh against the hosted product, which handles all of this transparently.