README

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

!Onlook-GitHub-Example

 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.onl