一款开源、以视觉为主的代码编辑器

在 Next.js + TailwindCSS 中利用 AI 打造网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时设计，同时生成代码。它是 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等工具的开源替代方案。

🚧 🚧 🚧 Onlook 仍在开发中 🚧 🚧 🚧

我们正在积极寻找贡献者，共同打造 Onlook for Web 这一从提示到构建的卓越体验。请查看 开放议题，了解所有拟议功能（以及已知问题），并加入我们的 Discord，与数百位其他开发者协作。

使用 Onlook 可以做什么：

• 几秒钟内创建 Next.js 应用程序
  • 从文本或图片开始
  • 使用预建模板
  • 从 Figma 导入
  • 从 GitHub 仓库导入
  • 向 GitHub 仓库提交 PR
• 可视化编辑您的应用程序
  • 使用类似 Figma 的界面
  • 实时预览您的应用
  • 管理品牌资产和样式变量
  • 创建并导航页面
  • 浏览图层
  • 管理项目图片
  • 检测并使用组件——此前已在 Onlook Desktop 中实现_
  • 拖放组件面板
  • 使用分支功能尝试不同的设计方案
• 开发工具
  • 实时代码编辑器
  • 从检查点保存和恢复
  • 通过 CLI 运行命令
  • 与应用市场连接
• 几秒钟内部署您的应用
  • 生成可分享的链接
  • 绑定自定义域名
• 与团队协作
  • 实时编辑
  • 发表评论
• 高级 AI 功能
  • 一次排队发送多条消息
  • 将图片用作参考和项目资产
  • 在项目中设置和使用 MCP
  • 允许 Onlook 自身作为工具调用来创建分支和迭代
• 高级项目支持
  • 支持非 NextJS 项目
  • 支持非 Tailwind 项目

开始使用

使用我们的托管应用或 本地运行。

使用方法

Onlook 可以运行在任何 Next.js + TailwindCSS 项目上，您可以将现有项目导入 Onlook，也可以在编辑器中从头开始。

使用 AI 聊天来创建或编辑您正在处理的项目。任何时候，您都可以右键单击某个元素，直接打开该元素在代码中的位置。

通过拖放方式绘制新的 div 并在父容器内重新排列它们。

将代码与您的站点设计并排预览。

使用 Onlook 的编辑器工具栏调整 Tailwind 样式、直接操作对象，并尝试不同的布局。

文档

如需完整文档，请访问 docs.onlook.com。

如需了解如何贡献，请参阅我们的文档中的 参与 Onlook 部分。

工作原理

1. 当您创建应用时，我们会将代码加载到一个 Web 容器中。
2. 容器运行并提供代码服务。
3. 我们的编辑器接收预览链接并在 iFrame 中显示。
4. 编辑器会读取并索引容器中的代码。
5. 我们会对代码进行插桩，以便将元素映射回其在代码中的位置。
6. 当元素被编辑时，我们会在 iFrame 中先编辑该元素，然后再更新代码。
7. 我们的 AI 聊天也具有代码访问权限，并拥有理解和编辑代码的工具。

从理论上讲，这种架构可以扩展到任何以声明式方式渲染 DOM 元素的语言或框架（例如 jsx/tsx/html）。目前，我们专注于使其与 Next.js 和 TailwindCSS 良好配合。

有关完整说明，请参阅我们的 架构文档。

我们的技术栈

前端

• Next.js - 全栈框架
• TailwindCSS - 样式工具
• tRPC - 服务器接口

数据库

• Supabase - 身份验证、数据库、存储
• Drizzle - ORM 框架

人工智能

• AI SDK - 大语言模型客户端
• OpenRouter - 大语言模型提供商
• Morph Fast Apply - 快速申请模型提供商
• Relace - 快速申请模型提供商

沙盒与托管

• CodeSandboxSDK - 开发沙盒
• Freestyle - 托管服务

运行时

• Bun - 单仓库管理、运行时、打包工具
• Docker - 容器管理

贡献

如果你有任何改进建议，欢迎 fork 本仓库并提交 pull request。你也可以直接提交 issue。

请参阅 CONTRIBUTING.md，了解贡献指南和行为准则。

贡献者

联系方式

• 团队：Discord - Twitter - LinkedIn - 电子邮件
• 项目： https://github.com/onlook-dev/onlook
• 官网：https://onlook.com

许可证

本项目采用 Apache 2.0 许可证进行分发。更多信息请参阅 LICENSE.md。

Onlook 快速上手指南

Onlook 是一款专为设计师和开发者打造的开源可视化代码编辑器，被誉为“设计师版的 Cursor”。它支持在浏览器中直接对 Next.js + TailwindCSS 项目进行可视化编辑，并实时同步代码。

1. 环境准备

在开始之前，请确保你的开发环境满足以下要求：

• 操作系统：Windows、macOS 或 Linux
• Node.js：建议安装最新 LTS 版本（用于运行 Next.js 项目）
• 包管理器：npm、yarn、pnpm 或 bun
• 框架依赖：Onlook 目前主要支持 Next.js 配合 TailwindCSS 的项目。

注意：Onlook 仍处于积极开发阶段（Beta），主要功能集中在 Next.js 和 TailwindCSS 生态系统中。

2. 安装与启动

你可以选择直接使用官方托管服务，或在本地运行以获得更完整的控制权。

方式一：使用官方托管服务（推荐新手）

无需配置本地环境，直接访问网页即可使用：

1. 访问 Onlook Hosted App
2. 登录账号并开始创建项目。

方式二：本地运行（适合开发者）

如果你希望本地部署或贡献代码，请按以下步骤操作：

1. 克隆仓库

   git clone https://github.com/onlook-dev/onlook.git
   cd onlook
   

2. 安装依赖 Onlook 使用 Bun 作为运行时和包管理器，请确保已安装 Bun。

   bun install
   

3. 启动开发服务器

   bun run dev
   

4. 访问应用 打开浏览器访问 http://localhost:3000（具体端口请参考终端输出）。

详细本地运行文档请参考：Running Locally

3. 基本使用

创建新项目

1. 从模板或文本生成：

   • 在 Onlook 界面中，你可以输入自然语言描述（例如：“创建一个带有导航栏的英雄区域”），AI 将自动生成 Next.js + TailwindCSS 代码。
   • 或者选择一个预建模板开始。

2. 导入现有项目：

   • 如果你已有 Next.js + TailwindCSS 项目，可以将其导入 Onlook 进行可视化编辑。

可视化编辑

• 即时预览与修改：

  • 界面左侧为可视化画布，右侧为代码编辑器。
  • 在画布上点击任意元素，右侧代码会自动定位到对应位置。
  • 使用顶部工具栏调整 Tailwind 样式（如间距、颜色、排版），修改会实时反映在代码和预览中。

• 拖拽布局：

  • 可以通过拖拽在父容器中重新排列 div 或其他组件。
  • 支持绘制新的 div 并嵌套到现有结构中。

• AI 辅助开发：

  • 使用内置的 AI 聊天窗口，通过对话方式修改项目。例如：“把按钮变成红色”或“添加一个页脚”。
  • AI 拥有代码上下文权限，能理解并执行复杂的代码变更。

• 右键查看代码：

  • 在任何元素上右键单击，可选择“在代码中打开”，直接跳转到该元素的确切代码行。

部署

• 编辑完成后，可一键生成可分享的链接。
• 支持绑定自定义域名，快速发布你的原型或网站。

---

更多高级功能和架构细节，请访问 Onlook 官方文档。