# Onlook — Visual AI Code Editor for React Apps

> Open-source Figma-like visual editor for building React and Next.js apps with AI. Edit visually and code syncs in real-time. Design branching, team collab, deploy. Apache-2.0, 25,000+ stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

1. Visit [onlook.com](https://onlook.com) to get started

2. Or run locally:
```bash
git clone https://github.com/onlook-dev/onlook.git
cd onlook
# Follow setup at docs.onlook.com/developers/running-locally
```

3. Open your Next.js + TailwindCSS project and start editing visually.

---

## Intro

Onlook is an open-source visual-first code editor for React apps with 25,000+ GitHub stars — often called "the Cursor for Designers." It provides a Figma-like interface for editing Next.js and TailwindCSS projects, with AI-powered app generation from text or images. Visual changes sync to code in real-time. Features design branching, team collaboration, deployment with shareable links, and brand asset management. Best for designers and front-end developers who want to build and style React apps visually while maintaining clean code output.

Explore more AI development tools on [TokRepo AI Open Source](https://tokrepo.com/en/@AI%20Open%20Source).

---

## Onlook — The Cursor for Designers

### What Makes Onlook Different

Unlike traditional code editors, Onlook lets you edit your React app visually — like Figma — while the code updates automatically in real-time. Unlike design-to-code tools, the output is your actual codebase, not generated components.

### Key Features

| Feature | Description |
|---------|------------|
| **AI App Generation** | Describe or upload an image → get a working app |
| **Visual DOM Editing** | Click, drag, and style components visually |
| **Real-Time Code Sync** | Visual changes instantly update source code |
| **Design Branching** | Experiment with variations without affecting main |
| **Team Collaboration** | Real-time editing with team members |
| **One-Click Deploy** | Deploy and share with a link |
| **Brand Management** | Manage design tokens and brand assets |
| **Checkpoints** | Version history with restore capability |

### Supported Stack

- **Framework**: Next.js
- **Styling**: TailwindCSS
- **Components**: Automatic detection and editing
- **Output**: Clean, production-ready code

### Workflow

1. **Open** your Next.js project in Onlook
2. **Edit** visually — select elements, change styles, move components
3. **Generate** new components with AI from text descriptions or images
4. **Branch** designs to experiment safely
5. **Review** code changes in real-time
6. **Deploy** with one click and share the link

### FAQ

**Q: What is Onlook?**
A: An open-source visual code editor that lets you build and style React/Next.js apps with a Figma-like interface while code syncs in real-time. Often called "the Cursor for Designers."

**Q: Is Onlook free?**
A: Yes, Onlook is open-source under Apache-2.0.

**Q: What frameworks does Onlook support?**
A: Currently Next.js with TailwindCSS. Visual edits produce clean, standard React code.

---

## Source & Thanks

> Created by [Onlook Dev](https://github.com/onlook-dev). Licensed under Apache-2.0.
>
> [Onlook](https://github.com/onlook-dev/onlook) — ⭐ 25,000+

Thanks to the Onlook team for bridging the gap between design and code.

---

<!-- ZH -->

## Quick Use

1. Visit [onlook.com](https://onlook.com) to get started

2. Or run locally:
```bash
git clone https://github.com/onlook-dev/onlook.git
cd onlook
```

3. Open a Next.js + TailwindCSS project and start editing visually.

---

## Introduction

Onlook is an open-source visual code editor with 25,000+ GitHub stars — dubbed "Cursor for designers." It provides a Figma-like interface for editing Next.js and TailwindCSS projects, with visual changes syncing to code in real time. Supports AI app generation from text or images, design branches, team collaboration, and one-click deployment. Ideal for designers and frontend developers who want to build React apps visually while preserving code quality.

---

## Onlook — Cursor for Designers

### Core Features

- **AI app generation** — describe or upload an image → generate a working app
- **Visual DOM editing** — click, drag, and style components
- **Live code sync** — visual changes update source code instantly
- **Design branches** — experiment safely without affecting main
- **Team collaboration** — real-time multi-user editing
- **One-click deploy** — deploy and share a link

### FAQ

**Q: What is Onlook?**
A: An open-source visual code editor with a Figma-like interface for editing React/Next.js apps, with live code sync.

**Q: Is it free?**
A: Completely free and open source under Apache-2.0.

---

## Source & Thanks

> Created by [Onlook Dev](https://github.com/onlook-dev). Licensed under Apache-2.0.
>
> [Onlook](https://github.com/onlook-dev/onlook) — ⭐ 25,000+


---
Source: https://tokrepo.com/en/workflows/onlook-visual-ai-code-editor-react-apps-0d4f9803
Author: AI Open Source