explaingit

onlook-dev/onlook

★ 25,789TypeScriptAudience · vibe coderComplexity · 4/5MaintainedLicenseSetup · hard

TLDR

AI-powered visual editor for building Next.js and TailwindCSS websites. Drag, resize, and restyle elements in a Figma-like interface while seeing live code changes instantly.

Mindmap

mindmap
  root((Onlook))
    What it does
      Visual website builder
      AI-assisted editing
      Live code preview
      Deploy with one click
    How it works
      Drag and resize UI
      Inspect element code
      Edit code directly
      AI chat suggestions
    Tech stack
      Next.js and React
      TailwindCSS styling
      Supabase backend
      OpenRouter AI
    Use cases
      Build from text prompt
      Design from image
      Rapid prototyping
      No-code web apps

Things people build with this

USE CASE 1

Build a landing page or portfolio site by describing it in text and letting AI generate the initial design.

USE CASE 2

Take a screenshot or mockup image and turn it into a working Next.js website by visually editing in the browser.

USE CASE 3

Prototype and iterate on a web app design without touching code, then deploy it instantly with a shareable link.

USE CASE 4

Edit live code while seeing visual changes in real time, switching between design and code views as needed.

Tech stack

TypeScriptNext.jsReactTailwindCSSSupabaseDrizzleBunOpenRouter

Getting it running

Difficulty · hard Time to first run · 1h+

Requires Supabase setup, OpenRouter API key, and Bun runtime; multiple services need configuration before the editor is functional.

Use freely for any purpose including commercial. Keep the notice and disclose changes to the patent grant.

In plain English

Onlook is an open-source, AI-powered visual editor for building websites, specifically apps built with Next.js (a popular React framework) and TailwindCSS (a utility-first styling system). It positions itself as "Cursor for Designers," meaning it brings the AI-assisted coding experience of tools like Cursor to people who prefer working visually rather than writing code by hand. You can start a project from a text prompt or an image, then visually drag, resize, and restyle elements using a Figma-like interface (Figma is a popular design tool). At any point, you can inspect the real code behind any element, edit it directly, or let the AI chat make changes for you. The editor shows your live app in a preview pane alongside the code, so changes are immediate. You can deploy the finished app with a shareable link or connect a custom domain. Under the hood, Onlook loads your project's code into a sandboxed web container, instruments the code to map visual elements back to their source locations, and syncs edits bidirectionally between the visual layer and the actual files. The tech stack includes Next.js, TailwindCSS, Supabase for the database and authentication, Drizzle as a database interface, and Bun as the runtime. AI features are powered through OpenRouter. It is available as a hosted app at onlook.com or can be run locally.

Copy-paste prompts

Prompt 1
I have a Next.js project with TailwindCSS. How do I load it into Onlook and start editing components visually?
Prompt 2
Show me how to use Onlook's AI chat to change the color scheme and layout of my website without writing CSS.
Prompt 3
How do I inspect an element in Onlook to see its source code and make direct edits?
Prompt 4
Can I start a new website from a text description in Onlook? Walk me through the process.
Prompt 5
How do I deploy my Onlook project and get a shareable link or connect a custom domain?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.