Onlook - Visual AI Editor for Designers

TL;DR

TL;DR: Onlook is an open-source visual code editor for designers. It layers a Figma-like drag-and-drop interface on top of a Next.js + TailwindCSS codebase, with AI that generates and edits UI in real time. 26K GitHub stars, Apache-2.0 licensed.

Source and Accuracy Notes

• Project page: onlook.dev
• Source repository: github.com/onlook-dev/onlook
• License: Apache-2.0 (verified via GitHub API license.spdx_id)
• GitHub stars: 26,035 (as of 2026-06-24)
• Latest release: v0.2.32 (verified via GitHub Releases API)
• HN launch thread: news.ycombinator.com/item?id=44127653 (408 points)

What Is Onlook?

Onlook describes itself as “the design tool for AI-native designers.” The pitch is direct: instead of treating AI UI generation as a black box that spits out code you then hand off, Onlook keeps you in a visual editing environment throughout. You see your app as a design canvas and as live code at the same time, with AI generation and modification happening in-place.

The README positions Onlook as an open-source alternative to Bolt.new, Lovable, v0, Replit Agent, Figma Make, Webflow, and similar tools. The differentiator is that the source code is yours, runs on your machine, and the visual editor directly manipulates your Next.js + TailwindCSS project rather than generating a separate artifact.

The project ships a visual editor with a Figma-like layer panel, real-time code preview, branching for experimental designs, a CLI for command execution, and one-click deploy. AI generation supports starting from text prompts or images.

Setup Workflow

Step 1: Install Onlook

The project distributes a visual editor that you run locally. Clone the repository and follow the setup instructions in the README:

git clone https://github.com/onlook/onlook.git
cd onlook

For the web-based development server, the project uses Next.js. Check the repository for the current install and run commands.

Step 2: Create a New Project

From the Onlook interface:

• Start from a text prompt describing your desired app
• Or start from an image mockup
• Or use a prebuilt template from the marketplace

Onlook scaffolds a Next.js + TailwindCSS project based on your input.

Step 3: Visual Editing

The editor gives you:

• Layer panel — Figma-style tree of your app’s UI elements
• Canvas — drag-and-drop visual editor
• Real-time code sync — changes on canvas update code live
• Branch experimentation — create a branch to try design variations without breaking the main version

Step 4: AI-Assisted Editing

Prompt the AI to:

• Add new pages or components
• Modify existing elements
• Restyle sections based on natural language description
• Regenerate from a screenshot or wireframe

Step 5: Deploy

Connect your custom domain or use Onlook’s shareable link hosting to deploy the result directly from the editor.

Deeper Analysis

Onlook occupies an interesting position in the AI-assisted development toolchain. Most tools in this space (Bolt.new, Lovable, v0) operate as hosted products where you interact with a web UI and receive generated code as output. Onlook is a genuine desktop application — the editor runs locally, manipulates your actual project files, and the code it produces is the canonical source of truth.

The 26K star count on GitHub is substantial for a design tool, and the Apache-2.0 license means the project can be forked, modified, and built upon commercially without restrictions. The tech stack (Next.js, TailwindCSS, TypeScript) keeps it accessible to the mainstream web development audience.

The “Cursor for Designers” positioning maps onto a real gap. Cursor is beloved by developers who are comfortable in code. Onlook targets designers and product managers who think in visual terms but need to work with a real codebase. The layer panel and real-time code sync are the mechanism that makes that audience-capable bridge possible.

The project is explicitly in early access. The onlook.com/waitlist page handles the hosted product signup, while the GitHub repository is the self-hosted open-source option.

Practical Evaluation Checklist

• [x] Open-source (Apache-2.0) with public repository
• [x] Works with Next.js + TailwindCSS (widespread, free stack)
• [x] Visual layer panel with real-time code sync
• [x] AI generation from text or image input
• [x] Branch-based design experimentation
• [x] CLI tooling for power users
• [x] Deploy capability built in
• [x] Active development (v0.2.32, commit activity as of May 2026)
• [x] Supports custom domains on deploy

Security Notes

• Onlook runs locally and edits your actual codebase — review AI-generated changes before committing
• The editor connects to AI model providers via API. Ensure your API keys are stored securely (e.g. .env.local not committed to git)
• Deploy features connect to external hosting. Verify domain ownership before linking

FAQ

Q: How is this different from v0 or Bolt.new? A: Onlook is a local application that directly edits your project files. v0 and Bolt.new are hosted products that return generated code as output. Onlook keeps the visual canvas and the codebase in sync continuously rather than as a one-way generation step.

Q: Does it work with frameworks other than Next.js? A: Current focus is Next.js + TailwindCSS. Check the README for the latest framework support status.

Q: Is this production-ready? A: The project is in early access. For production use, evaluate carefully — the v0.2.x version numbering indicates an actively developing tool. Review release notes and test in a non-critical project first.

Q: Is there a hosted version? A: The team is building a hosted product. The GitHub repository is the self-hosted open-source option. Join the waitlist at onlook.com for the hosted release.

Conclusion

Onlook is the most design-tool-native open-source entry in the AI-assisted coding space. By keeping the visual editor and the codebase synchronized — rather than treating AI generation as a one-shot code delivery — it targets a real gap for designers who need to work with real code. At 26K stars and Apache-2.0 licensed, it is worth evaluating for teams that want a self-hosted, inspectable alternative to hosted AI UI generators.