Onlook：开源的可视化代码编辑器，26k Star

文章目录Onlook开源的可视化代码编辑器26k StarOnlook开源的可视化代码编辑器26k Star在网页开发领域可视化编辑一直是个让人又爱又恨的话题。Figma 设计稿和实际代码之间的鸿沟每次改动都需要在浏览器和编辑器之间来回切换。Onlook 试图解决这个问题它在 GitHub 上收获了 26,114 个 Star。Onlook 是一个开源的可视化代码编辑器定位为 Bolt.new、Lovable、V0 等工具的替代品。它让你在浏览器中直接可视化编辑代码操作结果实时同步到代码文件。核心功能Onlook 基于 Next.js TailwindCSS 构建界面风格类似 Figma。用户可以直接在页面上选中元素、拖拽调整位置、修改样式所有操作都会同步到代码层面。项目创建方面Onlook 支持从文本描述或图片生成新应用也提供了预制模板快速起步。编辑器内置了 Figma 风格的操作面板包含图层浏览、页面导航、品牌资产和 Token 管理等功能。组件检测是 Onlook 的特色之一。它能自动识别项目中已有的组件并在组件面板中呈现支持拖拽插入。分支功能允许用户在设计上做实验不用担心搞乱主分支。编辑器提供实时代码预览修改样式时能看到最终效果。检查点功能可以保存和恢复不同版本。命令行工具和内置终端也集成在界面中。AI 方面Onlook 支持多消息队列发送可以上传图片作为参考或素材也接入了 MCP 协议。更值得一提的是Onlook 可以用自己作为工具调用自动创建分支、迭代修改。团队协作方面编辑器支持多人实时编辑也可以直接在页面上留言评论。项目还支持部署生成可分享链接以及绑定自定义域名。对于非 Next.js 或非 Tailwind 的项目Onlook 也提供了基础支持。技术架构Onlook 的工作流程分为几个步骤创建应用时代码加载到一个 Web 容器中容器运行并对外服务编辑器读取容器代码并建立索引通过对代码插装将页面元素映射到代码位置编辑元素时同时更新 iFrame 显示和代码文件。AI 对话也拥有代码访问权限和相关工具可以理解和修改代码。这套架构理论上可以扩展到任何声明式渲染 DOM 的语言或框架不过团队目前集中精力做好 Next.js 和 TailwindCSS 的支持。技术栈前端使用 Next.js、TailwindCSS 和 tRPC。数据库选用 Supabase认证、存储、数据库和 Drizzle ORM。AI 部分使用 AI SDK 做 LLM 客户端OpenRouter 提供模型Morph Fast Apply 和 Relace 处理快速应用。沙箱环境基于 CodeSandboxSDK部署使用 Freestyle。整个项目用 Bun 管理Docker 做容器化。如何开始团队提供了托管服务onlook.com和本地运行两种方式。手头有 Next.js TailwindCSS 项目可以直接导入 Onlook 使用也可以从零开始在编辑器内创建项目。通过 AI 对话可以创建或修改项目编辑器中随时右键点击元素就能定位到代码位置。项目以 Apache 2.0 协议开源详细的文档和贡献指南访问 docs.onlook.com 即可查阅。0 协议开源详细的文档和贡献指南访问 docs.onlook.com 即可查阅。