onlook

The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI

onlook-dev

17115

1047

TypeScript

Onlook

Cursor for Designers
Explore the docs »

View Demo · Report Bug · Request Feature

The Cursor for Designers – 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.

🚧 🚧 🚧 Onlook for Web is still under development 🚧 🚧 🚧

We’re actively looking for contributors to help make Onlook for Web an
incredible prompt-to-build experience. Check the
open issues for a full list of
proposed features (and known issues), and join our
Discord to collaborate with hundreds of other
builders.

What you can do with Onlook:

[x] Create Next.js app in seconds
- [x] Start from text or image
- [ ] Use prebuilt templates
- [ ] Import from Figma
- [ ] Start from GitHub repo
[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
- [ ] Browse layers – Previously in
  Onlook Desktop
- [ ] Detect and use Components – Previously in
  Onlook Desktop
- [ ] Manage project Images – Previously in
  Onlook Desktop
[x] Development Tools
- [x] Real-time code editor
- [x] Save and restore from checkpoints
- [x] Run commands via CLI
- [x] Connect with app marketplace
- [ ] Edit code locally – Previously in
  Onlook Desktop
[ ] Deploy your app in seconds
- [ ] Generate sharable links
- [ ] Link your custom domain
[ ] Collaborate with your team
- [ ] Real-time editing
- [ ] Leave comments

Onlook-GitHub-Example

Onlook for Desktop (aka Onlook Alpha)

We’re in early preview for Onlook Web. If you’re looking for the downloadable
desktop electron app, it’s moved to
Onlook Desktop.

Why are we moving to the web? Read about our decision:
Migrating from Electron to Web

Getting Started

Available soon with a hosted app or
run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project
through 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

When you create an app, we load the code into a web container
The container runs and serves the code
Our editor receives the preview link and displays it in an iFrame
Our editor reads and indexes the code from the container
We instrument the code in order to map elements to their place in code
When the element is edited, we edit the element in our iFrame, then in code
Our AI chat also has code access and tools to understand and edit the code

This architecture can theoretically scale to any language or framework that
displays DOM elements declaratively (e.g. jsx/tsx/html). We are focused on
making it work well with Next.js and TailwindCSS for now.

For a full walkthrough, check out our
Architecture Docs.