Onlook

Designers working on top of a codebase usually hand mockups to engineers and wait. Onlook closes that gap with an open source visual-first code editor where changes made in the browser DOM land directly in Next.js and TailwindCSS source, positioning itself against Bolt.new, Lovable, V0, Replit Agent, Figma Make and Webflow.

Under the surface, project code loads into a web container that serves it, the preview appears in an iFrame, and the code is indexed and instrumented so every element maps back to its place in the source. Edits apply to the iFrame first and then to the code. The stack is Next.js with tRPC, Supabase and Drizzle for data, the AI SDK over OpenRouter for models, and Bun for the monorepo.

The editor covers the span between a blank project and a deployed site.

• Project creation: Start a Next.js app from text, an image or a prebuilt template.
• Visual canvas: Browse layers, manage brand assets and tokens, and preview the app in real time.
• Code access: A real-time editor sits beside the design, with checkpoints to save and restore.
• Branching: Try alternative designs without disturbing the main line of work.
• Deployment: Generate a shareable link or point a custom domain at the result.

Onlook runs on any Next.js and TailwindCSS project, imported or started from scratch, through the hosted app or locally. Support for other frameworks and non-Tailwind projects remains open work.