What is Onlook
Onlook is an open-source, visual-first code editor built for designers and developers who want to build Next.js + TailwindCSS apps with AI-assisted workflows. It combines a Figma-like visual editor, a real-time code editor, and an AI chat that can generate or modify UI and code. The project aims to make prompt-to-build experiences smooth: start from text or images, visually edit the DOM, and deploy working apps quickly.
Key features
- Visual editor with realtime preview: edit DOM elements visually and see code side-by-side.
- AI chat & code integration: use natural language to create or edit pages; right-click any element to jump to its code location.
- Rapid app creation: create Next.js apps from text, image, or templates in seconds.
- Project tools: asset/token management, layers panel, components detection, branching and checkpoints.
- Deployment & sharing: generate sharable preview links and link custom domains; hosting integrations supported.
- Extensible architecture: instruments running containers, indexes code, and maps DOM elements to code locations to allow synchronized visual/code edits.
Tech & AI stack
- Frontend: Next.js, TailwindCSS, tRPC
- Runtime & tooling: Bun, Docker
- Database & infra: Supabase, Drizzle
- AI: uses AI SDK clients and multiple model providers (e.g., OpenRouter, Morph Fast Apply, Relace) for chat and generation features
- Sandbox & hosting integrations: CodeSandbox SDK, Freestyle
Use cases
- Designers who want to convert prompts or images into interactive Next.js prototypes and then tweak them visually.
- Developers who want rapid prototyping with AI-assisted code generation and direct manipulation of rendered elements.
- Teams experimenting with design iterations via branching and realtime collaboration features.
Project status & contribution
- The project is actively developed (noted in README as "still under development").
- Code is open-source under the Apache 2.0 license.
- Repo includes documentation at docs.onlook.com and community channels (Discord, Twitter, LinkedIn). Contributors are invited via GitHub PRs and issues.
How it works (high-level)
- When a project is created, Onlook loads the code into a web container and serves it.
- The editor gets a preview link and displays it in an iframe while indexing the container code.
- The system instruments the running app to map DOM elements to source locations; edits made in the visual layer are applied to both the rendered DOM and the underlying code.
- The AI chat has access to code/tooling to perform edits, generate components, and assist with design tasks.
License & availability
- Licensed under Apache 2.0.
- Hosted demo available at the official site; the repo supports local development with docs for running locally.
(Information synthesized from the project's GitHub README and repository metadata.)
