onlook-dev / onlook

Onlook 
 The design tool for AI-native designers — now in early access. 
 Onlook makes designing on top of your codebase effortless. Craft exceptional experiences with AI in code.
 → Join the waitlist 
 👨‍💻👩‍💻👨‍💻
 We're hiring engineers in SF! 
 👩‍💻👨‍💻👩‍💻
 View Demo 
 ·
 Report Bug 
 ·
 Request Feature 
[![Discord][discord-shield]][discord-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
[![Twitter][twitter-shield]][twitter-url]
中文 |
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:
- [x] Create Next.js app in seconds
 - [x] Start from text or image
 - [x] Use prebuilt templates
- [x] Visually edit your app
 - [x] Use Figma-like UI
 - [x] Preview your app in real-time
 - [x] Manage brand assets and tokens
 - [x] Create and navigate to Pages
 - [x] Browse layers
 - [x] Manage project Images
 - [x] Detect and use Components – _Previously in
 Onlook Desktop_
 - [ ] Drag-and-drop Components Panel
 - [x] Use Branching to experiment with designs
- [x] Development Tools
 - [x] Real-time code editor
 - [x] Save and restore from checkpoints
 - [x] Run commands via CLI
 - [x] Connect with app marketplace
- [x] Deploy your app in seconds
 - [x] Generate sharable links
 - [x] Link your custom domain 
- [ ] Collaborate with your team
 - [x] Real-time editing
 - [ ] Leave comments
- [ ] Advanced AI capabilities
 - [x] 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.
## Documentation
For full documentation, visit docs.onlook.com
To see how to Contribute, visit
Contributing to Onlook in our docs.
## How it works
1. When you create an app, we load the code into a web co