Onlook is an open-source visual-first code editor for designing websites, prototypes, and designs with AI directly in Next.js + TailwindCSS. It lets users edit the browser DOM visually while staying in sync with the real code.
Project overview
It targets a real pain point—designing on top of an existing codebase with conventional design tools—with an open-source approach that combines visual DOM editing, AI chat with code access, and creation from text or image prompts.
Project type
AI Coding
Use cases
Coding & Development
Deployment
Refer to project documentation
License
Apache-2.0
Best for
Developers and designers working in Next.js + TailwindCSS who want to design visually on top of a real codebase with AI assistance.
Users who want an open-source, self-hostable alternative to hosted AI app builders like Bolt.new, Lovable, V0, Replit Agent, Figma Make, and Webflow.
Key capabilities
Create a Next.js app in seconds starting from text or image prompts or prebuilt templates.
Make edits directly in the browser DOM with a visual editor, with right-click navigation to the element's exact location in code.
AI chat to create or edit a project, with code access and tools to understand and edit the code.
Limitations and risks
The project is focused on Next.js and TailwindCSS for now; other declarative DOM frameworks are only a theoretical possibility.
Operation depends on third-party services and models: Supabase for auth, database, and storage; CodeSandboxSDK as dev sandbox; Freestyle for hosting; and LLM/fast-apply model providers accessed via OpenRouter, Morph Fast Apply, and Relace. The end-to-end data boundary and cost implications of these dependencies are not clearly documented.
Getting started
The quickest path is the hosted app at onlook.com; to run locally, the README points to the external docs at docs.onlook.com/developers/running-locally, so local setup steps are not included in the README and setup difficulty is unclear.
Evidence and sources
README: <strong>The design tool for AI-native designers — now in early access.</strong>
README: Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source…
README: - [x] Create Next.js app in seconds - [x] Start from text or image - [x] Use prebuilt templates
README: Use our [hosted app](https://onlook.com) or [run locally](https://docs.onlook.com/developers/running-locally).
README: Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.