onlook-dev/onlook

Analysis updated 2026-05-18

★ 25,708TypeScriptAudience · vibe coderComplexity · 4/5LicenseSetup · hard

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

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

Click or tap to explore — scroll the page freely

What do people build with it?

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.

What is it built with?

TypeScriptNext.jsReactTailwindCSSSupabaseDrizzleBunOpenRouter

How does it compare?

	onlook-dev/onlook	akveo/ngx-admin	redocly/redoc
Stars	25,708	25,728	25,673
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	hard	moderate	easy
Complexity	4/5	3/5	2/5
Audience	vibe coder	pm founder	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get 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?

Frequently asked questions

What is onlook?

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.

What language is onlook written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, React.

What license does onlook use?

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

How hard is onlook to set up?

Setup difficulty is rated hard, with roughly 1h+ to a first successful run.

Who is onlook for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub onlook-dev on gitmyhub

Verify against the repo before relying on details.