Onlook：面向 React 的 AI 优先开源可视化代码编辑器
Onlook 是一个开源的可视化优先代码编辑器，定位为“设计师的 Cursor”，让你在 Next.js + TailwindCSS 项目上直接用 AI 与可视化界面进行设计、样式调整和代码编辑。它把浏览器 DOM 与源码双向映射，支持 AI 对话生成/修改应用、Figma 式拖拽编辑、实时预览、组件识别、分支实验、检查点保存与部署，采用 Apache 2.0 许可证。
社区作者 · zZz
它解决什么问题
Onlook 官方描述为「The design tool for AI-native designers」，同时提供托管产品（早期访问、需加入 waitlist）与开源代码仓库。本仓库是“开启 Onlook 的那个开源可视化编辑器”，基于 Next.js + Tailwind 构建，官方称其为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等的开源替代方案（配图 1）。
核心能力（源自正文的功能清单）：秒级创建 Next.
js 应用；从文本或图片起步；使用预置模板；可视化编辑应用；Figma 式 UI；实时预览；管理品牌资产与设计 token；创建与跳转页面；浏览图层；管理项目图片；检测并使用组件（该能力此前位于 Onlook Desktop）；组件面板拖拽；用分支（Branching）做设计实验；开发工具；实时代码编辑器；从检查点保存与恢复；通过 CLI 运行命令；连接应用市场；秒级部署；生成可分享链接；绑定自定义域名；团队协作（实时编辑、评论）；高级 AI 能力（一次排队多条消息、把图片作为参考与资源、在项目中使用 MCP、允许 Onlook 把自身作为工具调用进行分支创建与迭代）；项目管理（支持非 Next.
js 项目、支持非 Tailwind 项目）。
使用方式（正文 Usage）：Onlook 可运行在任何 Next.js + TailwindCSS 项目上，把项目导入 Onlook，或直接在编辑器里从零开始。用 AI 聊天创建或修改正在做的项目；随时右键任意元素即可打开该元素在代码中的确切位置（配图 5 展示代码与元素连接）。可以在父容器内绘制新的 div 并通过拖拽重新排布（配图 4 展示插入 div）。可以并排预览代码与站点设计（配图 6 展示文本样式调整）。用编辑器工具栏调整 Tailwind 样式、直接操作对象并试验布局。
工作原理（配图 7，架构图）：创建应用时，代码被载入 Web 容器；容器运行并服务该代码；编辑器拿到预览链接并显示在 iFrame 中；编辑器从容器读取并索引代码；对代码做插桩以把元素映射到代码位置；当元素被编辑时，先在 iFrame 中修改元素，再修改代码；AI 聊天同样具备代码访问权限和用于理解、编辑代码的工具。官方表示该架构理论上可扩展到任何以声明式方式显示 DOM 元素的语言或框架（如 jsx/tsx/html），但当前聚焦于把 Next.js 与 TailwindCSS 做好，完整讲解见其 Architecture Docs。
技术栈（正文 Our Tech Stack）：前端为 Next.js（全栈）与 TailwindCSS（样式）、tRPC（服务端接口）；数据库为 Supabase（认证、数据库、存储）与 Drizzle（ORM）；AI 层为 AI SDK（LLM 客户端）、OpenRouter（LLM 模型提供方）、Morph Fast Apply 与 Relace（快速应用模型提供方）；沙箱与托管为 CodeSandboxSDK（开发沙箱）与 Freestyle（托管）；运行时为 Bun（monorepo、运行时、打包器）与 Docker（容器管理）。
文档与贡献：完整文档见 docs.onlook.com；贡献方式见文档中的 Contributing to Onlook 以及仓库 CONTRIBUTING.md（含行为准则）。正文另提供 Discord、Twitter、LinkedIn、Email、YouTube 等联系渠道（配图 9 为贡献者展示）。
许可证：按 Apache 2.0 分发，详见仓库 LICENSE.md。
适用对象：希望在代码库里以可视化方式做设计的前端/全栈工程师、需要与代码协作的设计师、构建 Next.js + TailwindCSS 原型或官网的团队，以及想用 AI 直接改自己代码库（而非从平台黑盒生成）的开发者。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
正文未给出可复制的安装命令，仅给出两条路径与操作说明，具体命令需以官方文档为准（待核验）。
1）准备环境
- 使用 Onlook 的托管应用，或在本地运行。
- 本地或导入的项目需为 Next.js + TailwindCSS 项目：正文明确“Onlook will run on any Next.js + TailwindCSS project”。（正文未列出 Node/Bun 版本、Docker 等本地运行的最低环境要求，待核验；技术栈提到运行时使用 Bun、容器管理使用 Docker。）
2）安装与启动（按正文顺序）
- 方式 A：使用官方托管应用（正文顶部说明托管产品处于 early access，需通过 waitlist 加入）。
- 方式 B：run locally，正文以链接指向官方 Getting Started / 本地运行文档；本地运行的具体命令、先后顺序未在正文中给出，待核验。
3）首次运行与基本使用
- 将你的 Next.js + TailwindCSS 项目导入 Onlook，或直接在编辑器内从零开始创建项目。
- 默认操作流程：用 AI 聊天创建或编辑项目；右键任意元素打开其在代码中的确切位置；在父容器内绘制新的 div 并拖拽重新排布；并排预览代码与站点设计；用编辑器工具栏调整 Tailwind 样式、直接操作对象并试验布局。
- 其他可用能力：创建/跳转页面、浏览图层、管理项目图片、检测组件、实时编辑代码、从检查点保存与恢复、通过 CLI 运行命令、使用分支做设计实验、部署并生成可分享链接、绑定自定义域名、团队协作与评论。
4）常见问题与排障
- 正文未提供 FAQ、错误码或排障命令，待核验。
- 完整文档集中在 docs.onlook.com；贡献说明见文档中的 Contributing to Onlook 与仓库 CONTRIBUTING.md（含行为准则）。
- 若遇到问题，正文给出 Report Bug、Request Feature 入口，以及 Discord、Twitter、LinkedIn、Email、YouTube 等联系渠道。
