Onlook

Cursor for Designers
Explore the docs »

👨‍💻👩‍💻👨‍💻 We're hiring engineers in SF! 👩‍💻👨‍💻👩‍💻

View Demo · Report Bug · Request Feature

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

开源可视化优先的代码编辑器

使用 Next.js + TailwindCSS 结合 AI 技术构建网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时编码设计。作为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。

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

我们正在积极寻找贡献者，共同将 Onlook 网页版打造成为卓越的"提示即构建"体验。查看待解决问题获取完整的功能提案（及已知问题）列表，并加入我们的Discord与数百名开发者协作。

使用 Onlook 可以实现的功能：

• 秒速创建 Next.js 应用

  • 从文本或图片开始
  • 使用预制模板
  • 从 Figma 导入
  • 从 GitHub 仓库开始

• 可视化编辑应用

  • 使用类 Figma 界面
  • 实时预览应用
  • 管理品牌资产与设计变量
  • 创建并跳转页面
  • 浏览图层结构
  • 管理项目图片
  • 检测并使用组件 - 原功能位于 Onlook 桌面版

• 开发工具

  • 实时代码编辑器
  • 保存与恢复检查点
  • 通过 CLI 运行命令
  • 连接应用市场

• 秒速部署应用

  • 生成可分享链接
  • 绑定自定义域名

• 团队协作功能

  • 实时协同编辑
  • 添加批注

快速开始

即将通过托管应用或 本地运行提供。

使用方法

Onlook 可运行于任何 Next.js + TailwindCSS 项目，您可以将项目导入 Onlook 或在编辑器内从零开始构建。

通过 AI 聊天功能创建或编辑项目。任何时候，您都可以右键点击元素直接定位到对应代码位置。

通过拖拽操作绘制新的 div 元素并在父容器中重新排列布局。

在网站设计界面并排预览代码效果

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

文档

完整文档请访问 docs.onlook.com

查看如何贡献，请访问文档中的 为Onlook做贡献。

工作原理

1. 创建应用时，我们会将代码加载至网页容器
2. 容器运行并托管代码
3. 编辑器接收预览链接并在 iFrame 中显示
4. 编辑器读取并索引容器中的代码
5. 通过代码插桩实现元素与源代码位置的映射
6. 编辑元素时，先在 iFrame 中修改，再同步至源代码
7. AI 聊天功能同样具备代码访问与编辑能力

该架构理论上可扩展至任何以声明式呈现 DOM 元素的语言/框架（如 jsx/tsx/html）。目前我们主要聚焦 Next.js 与 TailwindCSS 的深度适配

完整指南请参阅我们的 架构文档。

技术栈

前端

• Next.js - 全栈框架
• TailwindCSS - 样式方案
• tRPC - 服务端接口

数据库

• Supabase - 认证/数据库/存储
• Drizzle - ORM 工具

AI

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

沙盒与托管

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

运行时

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

参与贡献

如果您有改进建议，欢迎 Fork 本仓库并提交 Pull Request。您也可以直接提交问题。

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

贡献者

联系我们

• 团队联系： Discord - Twitter - LinkedIn - Email
• 项目主页： https://github.com/onlook-dev/onlook
• 官方网站： https://onlook.com

许可协议

基于 Apache 2.0 许可证分发。详见 LICENSE.md 获取更多信息。