Onlook 可视化编辑器快速落地3 条路径跑通你的 React 设计-代码同步环境【免费下载链接】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设计师改完一个页面还要开需求单等前端排期Onlook 把这条路砍掉了它在浏览器里直接可视化编辑 React 应用改动同步回真实代码还带 AI 生成。按下面这份清单操作你今天就能在自己机器上跑起一套可用的环境。先看这张图搞懂它怎么转起来四件事记住就够了你创建的项目代码跑在 Web 容器里由容器负责运行并吐出一个预览地址编辑器把这个地址装进 iFrame在页面里嵌一个小窗口的技术里展示你在里面点选、拖拽系统给代码打了桩把 iFrame 里的每个 DOM 元素映射回源码位置——所以你在画面上改字改的是代码AI 对话同样能读写代码它不是只出建议而是直接落刀。三条路径先选再动手路径适合谁前置条件一句话定位本地开发想贡献代码、逐行看行为的开发者Bun、Node v20.16.0、Docker、三把 API 密钥bun dev一条命令起全栈容器化Docker Compose团队预发环境、已有 Docker 基建的机器4 核 / 8GB 内存、Docker 20.10单容器生产构建自动重启单机生产standalone5~20 人的正式团队同上外加进程管理工具如 PM2无容器依赖独立 Node 服务器三条路径都跑在 docker-compose.yml 和根目录 package.json 定义的脚本上差别只在最后一步怎么起服务。路径一本地开发环境 5 步起全栈 准备清单装好 Bun、Nodev20.16.0别用 v20.11.0和 Docker准备好 CodeSandbox、OpenRouter 两把密钥再加 Morph 或 Relace 其中一把用于 AI 应用代码。git clone https://gitcode.com/GitHub_Trending/on/onlook.git cd onlook bun installbun run setup:env # 交互式写环境变量生成 apps/web/client/.env bun backend:start # 用 Docker 起本地 Supabase认证数据库存储 bun db:push # 推送数据库表结构 bun db:seed # 灌入测试用户和项目 bun dev # 启动开发服务器 跑起来后的样子浏览器打开http://localhost:3000就是这个界面——左侧画布、右侧代码实时联动。一个小坑先说在前面iFrame 里如果停在 CodeSandbox 的确认页切到预览模式点一下proceed to preview再切回来即可文档见 troubleshooting.mdx。路径二容器化部署最小配置 前置一台 4 核、8GB 内存、50GB 磁盘的机器Docker 20.10。bun install bun run setup:env bun backend:start bun db:push docker compose up -d --builddocker-compose.yml里只定义了一个web-client服务镜像由根 Dockerfile 构建内部执行 Next.js standalone 构建network_mode: host让容器直接复用宿主机网络去连bun backend:start拉起来的本地 SupabaseAPI 在 127.0.0.1:54321。镜像自带健康检查挂了自动拉起重试restart: unless-stopped兜底。验证方式docker compose ps看状态curl http://localhost:3000应返回页面。路径三单台服务器的生产构建 步骤与路径二几乎一致只是最后不走容器bun run build # 产出 standalone 版本 bun .next/standalone/apps/web/client/server.js # 启动生产服务器 pm2 start .next/standalone/apps/web/client/server.js --name onlook用 PM2 托管可以白拿开机自启和崩溃重启配置方法参考 single-machine.mdx。这条路径资源开销最小适合不想引入容器编排的中小团队。上线前必做的三件事密钥出本地副本不要直接改仓库文件。setup:env生成的apps/web/client/.env是本地副本上线前把它里的 Supabase 连接信息和三把 API 密钥替换为生产值密钥托管交给系统环境变量或 secret 管理工具。套上 HTTPS 和反向代理在 Nginx 这类反向代理层配 SSL 证书并缓存静态资源浏览器端跨域与鉴权行为见 next.config.ts路由与构建优化都以它为准。可维护性兜底给进程加守护PM2 或容器重启策略给 Supabase 的 PostgreSQL 配每日备份——db:reset会清库没有备份等于裸奔。验收与排障✅ 两条核心自查过不了别往下走在画布里双击一段文字改内容右侧代码区对应位置应立即出现同样的改动可视化编辑-代码同步在 AI 对话里输入生成一个定价页新组件出现在预览中且导出代码可被编辑器识别。现象可能原因处理端口 3000 被占用容器起不来宿主机另有服务占用停掉占用进程或改 docker-compose.yml 本地副本的端口映射报 Column not found数据库表结构与代码脱节先bun db:push仍失败再bun db:reset清库慎用预览 iFrame 停在确认页CodeSandbox 需要人工确认切预览模式点proceed to preview见 troubleshooting.mdx| 刷新页面后登录态丢失 | Node 版本过旧v20.11.0 有已知问题 | 升级到 v20.16.0重装依赖并清浏览器 Cookie | | 构建内存不足报错 | 构建期内存超限 | 设置NODE_OPTIONS--max-old-space-size4096后重试 |跑通之后往哪走下一步值得花时间的是模板化项目创建把常用页面沉淀成模板和读一遍 架构文档——理解元素映射机制后你改编辑器会快很多。self-hosting 部署文档贡献指南 CONTRIBUTING.md环境跑起来的那一刻你和设计师之间那层提单-排期的墙就已经拆了。【免费下载链接】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 可视化编辑器快速落地：3 条路径跑通你的 React 设计-代码同步环境
Onlook 可视化编辑器快速落地3 条路径跑通你的 React 设计-代码同步环境【免费下载链接】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设计师改完一个页面还要开需求单等前端排期Onlook 把这条路砍掉了它在浏览器里直接可视化编辑 React 应用改动同步回真实代码还带 AI 生成。按下面这份清单操作你今天就能在自己机器上跑起一套可用的环境。先看这张图搞懂它怎么转起来四件事记住就够了你创建的项目代码跑在 Web 容器里由容器负责运行并吐出一个预览地址编辑器把这个地址装进 iFrame在页面里嵌一个小窗口的技术里展示你在里面点选、拖拽系统给代码打了桩把 iFrame 里的每个 DOM 元素映射回源码位置——所以你在画面上改字改的是代码AI 对话同样能读写代码它不是只出建议而是直接落刀。三条路径先选再动手路径适合谁前置条件一句话定位本地开发想贡献代码、逐行看行为的开发者Bun、Node v20.16.0、Docker、三把 API 密钥bun dev一条命令起全栈容器化Docker Compose团队预发环境、已有 Docker 基建的机器4 核 / 8GB 内存、Docker 20.10单容器生产构建自动重启单机生产standalone5~20 人的正式团队同上外加进程管理工具如 PM2无容器依赖独立 Node 服务器三条路径都跑在 docker-compose.yml 和根目录 package.json 定义的脚本上差别只在最后一步怎么起服务。路径一本地开发环境 5 步起全栈 准备清单装好 Bun、Nodev20.16.0别用 v20.11.0和 Docker准备好 CodeSandbox、OpenRouter 两把密钥再加 Morph 或 Relace 其中一把用于 AI 应用代码。git clone https://gitcode.com/GitHub_Trending/on/onlook.git cd onlook bun installbun run setup:env # 交互式写环境变量生成 apps/web/client/.env bun backend:start # 用 Docker 起本地 Supabase认证数据库存储 bun db:push # 推送数据库表结构 bun db:seed # 灌入测试用户和项目 bun dev # 启动开发服务器 跑起来后的样子浏览器打开http://localhost:3000就是这个界面——左侧画布、右侧代码实时联动。一个小坑先说在前面iFrame 里如果停在 CodeSandbox 的确认页切到预览模式点一下proceed to preview再切回来即可文档见 troubleshooting.mdx。路径二容器化部署最小配置 前置一台 4 核、8GB 内存、50GB 磁盘的机器Docker 20.10。bun install bun run setup:env bun backend:start bun db:push docker compose up -d --builddocker-compose.yml里只定义了一个web-client服务镜像由根 Dockerfile 构建内部执行 Next.js standalone 构建network_mode: host让容器直接复用宿主机网络去连bun backend:start拉起来的本地 SupabaseAPI 在 127.0.0.1:54321。镜像自带健康检查挂了自动拉起重试restart: unless-stopped兜底。验证方式docker compose ps看状态curl http://localhost:3000应返回页面。路径三单台服务器的生产构建 步骤与路径二几乎一致只是最后不走容器bun run build # 产出 standalone 版本 bun .next/standalone/apps/web/client/server.js # 启动生产服务器 pm2 start .next/standalone/apps/web/client/server.js --name onlook用 PM2 托管可以白拿开机自启和崩溃重启配置方法参考 single-machine.mdx。这条路径资源开销最小适合不想引入容器编排的中小团队。上线前必做的三件事密钥出本地副本不要直接改仓库文件。setup:env生成的apps/web/client/.env是本地副本上线前把它里的 Supabase 连接信息和三把 API 密钥替换为生产值密钥托管交给系统环境变量或 secret 管理工具。套上 HTTPS 和反向代理在 Nginx 这类反向代理层配 SSL 证书并缓存静态资源浏览器端跨域与鉴权行为见 next.config.ts路由与构建优化都以它为准。可维护性兜底给进程加守护PM2 或容器重启策略给 Supabase 的 PostgreSQL 配每日备份——db:reset会清库没有备份等于裸奔。验收与排障✅ 两条核心自查过不了别往下走在画布里双击一段文字改内容右侧代码区对应位置应立即出现同样的改动可视化编辑-代码同步在 AI 对话里输入生成一个定价页新组件出现在预览中且导出代码可被编辑器识别。现象可能原因处理端口 3000 被占用容器起不来宿主机另有服务占用停掉占用进程或改 docker-compose.yml 本地副本的端口映射报 Column not found数据库表结构与代码脱节先bun db:push仍失败再bun db:reset清库慎用预览 iFrame 停在确认页CodeSandbox 需要人工确认切预览模式点proceed to preview见 troubleshooting.mdx| 刷新页面后登录态丢失 | Node 版本过旧v20.11.0 有已知问题 | 升级到 v20.16.0重装依赖并清浏览器 Cookie | | 构建内存不足报错 | 构建期内存超限 | 设置NODE_OPTIONS--max-old-space-size4096后重试 |跑通之后往哪走下一步值得花时间的是模板化项目创建把常用页面沉淀成模板和读一遍 架构文档——理解元素映射机制后你改编辑器会快很多。self-hosting 部署文档贡献指南 CONTRIBUTING.md环境跑起来的那一刻你和设计师之间那层提单-排期的墙就已经拆了。【免费下载链接】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），仅供参考
