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 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:

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

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.