三步把 Onlook 可视化编辑器部署上线【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook你的前端团队需要这样一个工具设计师在画布上拖拽改按钮颜色旁边的 React 代码立刻跟着变。Onlook 就是做这件事的——可视化编辑器里直接编辑 React 应用改动实时生成代码。下面给你两条路径看你的团队属于哪种从克隆到浏览器打开编辑器只用三步。选你的部署路径先搞清楚代码跑在哪Onlook 的核心原理很直接你的项目代码被加载进一个 web 容器运行编辑器通过 iFrame 显示预览再给代码插桩把 iFrame 里的每个 DOM 元素映射回源码位置——你在画布上点谁谁就被定位到对应的 JSX。所以它不是读个截图而是编辑与代码真同步。按你的情况选路径本地试玩、小团队10人内部用 → 路径Adocker-compose.yml 一键起容器自带健康检查和自动重启需要 CI/CD、多环境、对外提供服务 → 路径Bcompose 之上加 Nginx 反向代理 CDN详见 docs/self-hosting/先记住组件关系最小闭环从克隆到浏览器打开编辑器前置依赖Bun 1.3monorepo 运行时和包管理器Docker 20.10 与 Docker Compose 2.0跑本地 Supabase 后端Node.js v20.16.0Git拉代码 装依赖仓库是 monorepo装依赖前先把代码拉下来bun install会一次装好所有 workspacesgit clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install装完node_modules/应该出现在根目录终端不再报错。填环境变量Docker 容器通过apps/web/client/.env读配置复制模板来填cp apps/web/client/.env.example apps/web/client/.env最少要填三组Supabase 的 URL、anon key 和 service role key本地起后端后从输出里拿、OpenRouter API keyAI 对话、CodeSandbox token用户代码沙箱。其余字段说明见 docs/developers/ 的 setup:env 指引。启动 验证起本地 Supabase 后端、建表、造测试数据然后起前端开发服务bun backend:start bun db:push bun db:seed bun dev打开 http://localhost:3000 ✅ 看到可拖拽的编辑区、能右键元素跳到源码位置说明容器→iFrame→代码这条核心链路已经通了。生产加固性能、安全、可观测怎么做性能构建走 standalone 输出 → Dockerfile 里bun run build:standalone只打运行时产物 → 镜像更小、CI 可缓存冷启动不拖沓Supabase 用生产实例而不是本地 docker 版 → apps/backend/ 的本地栈只是开发态 → 多人并发时查询排队编辑体验直接卡住静态资源交给反向代理加 CDN别让用户每次直连源站拉字体和图片安全敏感 key 一律走容器的 env 注入.env不入 git → 看 .env.example 里哪些字段必须保密 → key 泄了等于你的 LLM 额度被白嫖对外只暴露 3000 端口且经 Nginx 终结 HTTPS → 容器默认network_mode: host是为了连本机 Supabase → 直接裸奔暴露会导致数据库端口跟着漏出去数据隔离依赖 Supabase RLS 策略 → 迁移在 apps/backend/supabase/migrations/ → 不启用会看到别人的项目可观测compose 已配好 healthcheck 和restart: unless-stopped→ 崩了会自动拉起不用人肉盯排障第一手信息docker-compose logs -f配合 Supabase 后台日志对时间线生产环境的界面长这样右侧是随画布编辑实时变化的代码面板踩坑速查端口与连接问题现象大概率原因一步排查命令/操作容器起不来构建失败或 env 文件缺失docker-compose logs -f web-client端口占用3000 被别的服务占了lsof -i:3000数据库连接超时bun backend:start没跑或端口不对curl http://127.0.0.1:54321静态资源 404镜像里 public 产物不完整重建镜像docker-compose build构建内存不足容器构建时 OOM给 Docker 分配 8G 内存后重试如果以上都没命中去仓库 issues 里搜相同报错关键词大概率有人踩过。二次开发入口改哪里能做什么本节仅作导航具体开发规范请阅读 docs/developers/。packages/rpc/ —— 客户端与服务端之间的 tRPC 接口定义想给编辑器加新能力从这里加路由apps/web/server/src/router/ —— 服务端 API 路由挂载目录改这里可以扩展现有接口的行为packages/sandbox/ 与 packages/code-provider/ —— 新建项目的脚手架文件和沙箱提供方逻辑改这里可以定制新建项目时的初始模板持续跟进 求助Onlook 迭代很快养成两个习惯定期在仓库根目录git pull拉最新代码然后扫一眼 README.md 的更新说明。资源入口各一行官方文档docs/content/docs/自托管细节在 self-hosting 子目录源码与接口入口packages/ 下的 rpc、ai、parser 三个包最值得先读社区与贡献CONTRIBUTING.md遇到问题先在仓库 issues 搜同症状再开新 issue跑通之后剩下的就是把它嵌进你的设计评审和前端交付流程里。【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 三步把 Onlook 可视化编辑器部署上线
三步把 Onlook 可视化编辑器部署上线【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook你的前端团队需要这样一个工具设计师在画布上拖拽改按钮颜色旁边的 React 代码立刻跟着变。Onlook 就是做这件事的——可视化编辑器里直接编辑 React 应用改动实时生成代码。下面给你两条路径看你的团队属于哪种从克隆到浏览器打开编辑器只用三步。选你的部署路径先搞清楚代码跑在哪Onlook 的核心原理很直接你的项目代码被加载进一个 web 容器运行编辑器通过 iFrame 显示预览再给代码插桩把 iFrame 里的每个 DOM 元素映射回源码位置——你在画布上点谁谁就被定位到对应的 JSX。所以它不是读个截图而是编辑与代码真同步。按你的情况选路径本地试玩、小团队10人内部用 → 路径Adocker-compose.yml 一键起容器自带健康检查和自动重启需要 CI/CD、多环境、对外提供服务 → 路径Bcompose 之上加 Nginx 反向代理 CDN详见 docs/self-hosting/先记住组件关系最小闭环从克隆到浏览器打开编辑器前置依赖Bun 1.3monorepo 运行时和包管理器Docker 20.10 与 Docker Compose 2.0跑本地 Supabase 后端Node.js v20.16.0Git拉代码 装依赖仓库是 monorepo装依赖前先把代码拉下来bun install会一次装好所有 workspacesgit clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install装完node_modules/应该出现在根目录终端不再报错。填环境变量Docker 容器通过apps/web/client/.env读配置复制模板来填cp apps/web/client/.env.example apps/web/client/.env最少要填三组Supabase 的 URL、anon key 和 service role key本地起后端后从输出里拿、OpenRouter API keyAI 对话、CodeSandbox token用户代码沙箱。其余字段说明见 docs/developers/ 的 setup:env 指引。启动 验证起本地 Supabase 后端、建表、造测试数据然后起前端开发服务bun backend:start bun db:push bun db:seed bun dev打开 http://localhost:3000 ✅ 看到可拖拽的编辑区、能右键元素跳到源码位置说明容器→iFrame→代码这条核心链路已经通了。生产加固性能、安全、可观测怎么做性能构建走 standalone 输出 → Dockerfile 里bun run build:standalone只打运行时产物 → 镜像更小、CI 可缓存冷启动不拖沓Supabase 用生产实例而不是本地 docker 版 → apps/backend/ 的本地栈只是开发态 → 多人并发时查询排队编辑体验直接卡住静态资源交给反向代理加 CDN别让用户每次直连源站拉字体和图片安全敏感 key 一律走容器的 env 注入.env不入 git → 看 .env.example 里哪些字段必须保密 → key 泄了等于你的 LLM 额度被白嫖对外只暴露 3000 端口且经 Nginx 终结 HTTPS → 容器默认network_mode: host是为了连本机 Supabase → 直接裸奔暴露会导致数据库端口跟着漏出去数据隔离依赖 Supabase RLS 策略 → 迁移在 apps/backend/supabase/migrations/ → 不启用会看到别人的项目可观测compose 已配好 healthcheck 和restart: unless-stopped→ 崩了会自动拉起不用人肉盯排障第一手信息docker-compose logs -f配合 Supabase 后台日志对时间线生产环境的界面长这样右侧是随画布编辑实时变化的代码面板踩坑速查端口与连接问题现象大概率原因一步排查命令/操作容器起不来构建失败或 env 文件缺失docker-compose logs -f web-client端口占用3000 被别的服务占了lsof -i:3000数据库连接超时bun backend:start没跑或端口不对curl http://127.0.0.1:54321静态资源 404镜像里 public 产物不完整重建镜像docker-compose build构建内存不足容器构建时 OOM给 Docker 分配 8G 内存后重试如果以上都没命中去仓库 issues 里搜相同报错关键词大概率有人踩过。二次开发入口改哪里能做什么本节仅作导航具体开发规范请阅读 docs/developers/。packages/rpc/ —— 客户端与服务端之间的 tRPC 接口定义想给编辑器加新能力从这里加路由apps/web/server/src/router/ —— 服务端 API 路由挂载目录改这里可以扩展现有接口的行为packages/sandbox/ 与 packages/code-provider/ —— 新建项目的脚手架文件和沙箱提供方逻辑改这里可以定制新建项目时的初始模板持续跟进 求助Onlook 迭代很快养成两个习惯定期在仓库根目录git pull拉最新代码然后扫一眼 README.md 的更新说明。资源入口各一行官方文档docs/content/docs/自托管细节在 self-hosting 子目录源码与接口入口packages/ 下的 rpc、ai、parser 三个包最值得先读社区与贡献CONTRIBUTING.md遇到问题先在仓库 issues 搜同症状再开新 issue跑通之后剩下的就是把它嵌进你的设计评审和前端交付流程里。【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考