Onlook

<strong>The design tool for AI-native designers — now in early access.</strong>

Onlook makes designing on top of your codebase effortless. Craft exceptional experiences with AI in code.


<strong>→ Join the waitlist</strong>


👨‍💻👩‍💻👨‍💻
We're hiring engineers in SF!
👩‍💻👨‍💻👩‍💻


View Demo
·
Report Bug
·
Request Feature

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

This is the open-source visual editor that started Onlook (Next.js + Tailwind). The hosted product we're building next, for AI-native designers, is in early access via the waitlist above.

An Open-Source, Visual-First Code Editor

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 alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

What you can do with Onlook:

• Create Next.js app in seconds
  • Start from text or image
  • Use prebuilt templates
• Visually edit your app
  • Use Figma-like UI
  • Preview your app in real-time
  • Manage brand assets and tokens
  • Create and navigate to Pages
  • Browse layers
  • Manage project Images
  • Detect and use Components – Previously in Onlook Desktop
  • Drag-and-drop Components Panel
  • Use Branching to experiment with designs
• Development Tools
  • Real-time code editor
  • Save and restore from checkpoints
  • Run commands via CLI
  • Connect with app marketplace
• Deploy your app in seconds
  • Generate sharable links
  • Link your custom domain
• Collaborate with your team
  • Real-time editing
  • Leave comments
• Advanced AI capabilities
  • Queue multiple messages at once
  • Use Images as references and as assets in a project
  • Setup and use MCPs in projects
  • Allow Onlook to use itself as a toolcall for branch creation and iteration
• Advanced project support
  • Support non-NextJS projects
  • Support non-Tailwind projects

Getting Started

Use our hosted app or run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

Preview the code side-by-side with your site design.

Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.