# 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 as a script file and run:

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

## 快速使用

1. 访问 [onlook.com](https://onlook.com) 开始使用

2. 或本地运行：
```bash
git clone https://github.com/onlook-dev/onlook.git
cd onlook
```

3. 打开 Next.js + TailwindCSS 项目，开始可视化编辑。

---

## 简介

Onlook 是一个开源可视化代码编辑器，GitHub 25,000+ star，被称为"设计师的 Cursor"。提供类 Figma 界面编辑 Next.js 和 TailwindCSS 项目，可视化更改实时同步到代码。支持 AI 从文本或图片生成应用、设计分支、团队协作、一键部署。适合想要可视化构建 React 应用同时保持代码质量的设计师和前端开发者。

---

## Onlook — 设计师的 Cursor

### 核心功能

- **AI 应用生成** — 描述或上传图片→生成可用应用
- **可视化 DOM 编辑** — 点击、拖拽、样式化组件
- **实时代码同步** — 可视化更改立即更新源代码
- **设计分支** — 安全实验不影响主分支
- **团队协作** — 实时多人编辑
- **一键部署** — 部署并分享链接

### FAQ

**Q: Onlook 是什么？**
A: 开源可视化代码编辑器，类 Figma 界面编辑 React/Next.js 应用，代码实时同步。

**Q: 免费吗？**
A: 完全免费开源（Apache-2.0）。

---

## 来源与感谢

> 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/0d4f9803-33e3-11f1-9bc6-00163e2b0d79
Author: AI Open Source