❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦

🎨 「设计师和开发者必看！这个开源神器让白板秒变IDE，草图直接生成可运行代码」

大家好，我是蚝油菜花。你是否也经历过这些创作困境——

• 👉 在白板上画完架构图，还要手动转录成代码文件
• 👉 团队协作时，设计稿和代码版本永远对不上
• 👉 想快速验证创意，却在环境配置上浪费半天...

今天要拆解的 Pad.ws ，正在重新定义开发工作流！这个基于浏览器的黑科技：

• ✅ 所见即所得：Excalidraw白板直接联动VS Code，草图秒变可执行代码
• ✅ 全功能IDE：内置终端+多语言支持，开发调试无需切换工具
• ✅ 云原生协作：支持自托管部署，跨国团队可实时协同编码

已有团队用它3天完成产品原型，接下来将揭秘这套「视觉化编程」系统的技术内核！

Pad.ws 是什么

Pad.ws 是创新的在线开发环境，结合了白板功能与完整的 IDE 工具。基于浏览器运行，无需安装额外软件，用户可以随时随地通过任何设备访问。

将交互式白板与代码编辑器深度融合，支持使用 Excalidraw 进行绘图，方便头脑风暴和创意构思，集成 VS Code 和终端，满足代码编写、调试和运行需求。无缝切换的设计，让开发者在创意与技术实现之间流转。

Pad.ws 的主要功能

• 交互式白板：基于 Excalidraw 提供强大的绘图工具，支持绘制草图、流程图、思维导图等。
• 实时协作：支持多人同时在白板上绘图和编辑，适合团队头脑风暴和远程协作。
• 集成 VS Code：内置完整的 VS Code 编辑器，支持多种编程语言，提供语法高亮、代码自动补全等功能。
• 终端集成：内置终端，用户可以直接运行代码、安装依赖和执行命令。
• 多设备支持：基于浏览器运行，无需安装额外软件，支持从电脑、平板甚至手机访问。
• 自托管部署：支持在本地服务器或私有云上部署，用户可以根据需求进行配置。

Pad.ws 的技术原理

• 基于浏览器的架构：完全运行在浏览器中的工具，采用 Web 技术栈开发。
• WebSocket 实时通信：使用 WebSocket 技术实现白板和代码编辑器的实时协作功能。
• 安全机制：采用 HTTPS 加密传输数据，支持端到端加密和本地部署。

如何运行 pad.ws

pad.ws 是一个可以在浏览器中作为开发环境使用的白板应用。此应用使用 Excalidraw 作为白板界面，Coder 作为云开发环境。

在线体验

访问pad.ws以使用官方托管的实例。在测试期间提供免费的 Ubuntu 开发环境，无需任何设置。

• pad.ws：https://pad.ws

自托管部署

⚠️ 重要通知：此仓库处于早期开发阶段。docker-compose.yml 中提供的设置仅用于开发和测试目的。此简化示例允许你在 localhost 上托管 pad，但未经进一步配置不适用于实际生产环境 ⚠️

✅ 前提条件

• Linux 主机（仅在 Ubuntu 上测试过）
• Docker 和 Docker Compose：确保已安装。安装 Docker / 安装 Docker Compose

1. .env 文件

• 复制并检查默认值

  cp .env.template .env
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

2. PostgreSQL 🐘

确保整个部署的持久性（包括画布和配置）

• 运行 PostgreSQL 容器

  docker compose up -d postgres
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

3. Keycloak 🔑

用于访问和用户管理的 OIDC 提供者（在 coder 和 pad 应用中）

• 运行 Keycloak 容器

  docker compose up -d keycloak
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• 访问 Keycloak 管理控制台：http://localhost:8080

• 创建 Realm：给它一个适当的名称（例如 pad-ws）

• 创建 Client：

  • 给它一个 Client ID（例如 pad-ws-client）
  • 启用 Client Authentication
  • 将 * 添加到有效的重定向 URL 列表中
  • 其他设置可以保留默认值

• 获取凭据：

  • 导航到 Clients -> [你的 Client ID] -> Credentials 标签
  • 记下 Client secret。
  • 更新你的环境变量文件（.env）：

    OIDC_REALM=your_oidc_realm
    OIDC_CLIENT_ID=your_client_id 
    OIDC_CLIENT_SECRET=your_client_secret
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

• 创建用户：

  • 导航到 Users -> Create user
  • 填写详细信息
  • 重要：勾选 Email verified
  • 转到新用户的 Credentials 标签并设置密码

4. Coder 🧑‍💻

• 查找 Docker 组 ID：你需要此 ID 来授予必要的权限

  getent group docker | cut -d: -f3
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• 更新你的 .env 文件，添加 DOCKER_GROUP_ID：

  DOCKER_GROUP_ID=your_docker_group_id
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• 运行 Coder 容器

  docker compose up -d coder
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• 访问 Coder UI：在浏览器中打开 localhost:7080

• 首次登录：创建一个管理员用户（例如 admin）
• 创建模板：
  • 选择“从模板开始”选项
  • 选择一个基础镜像（例如 docker-containers 或简单的 Ubuntu），按需配置

• 生成 API 密钥：

  • 点击你的个人资料图片（右上角） -> Account -> API Keys
  • 生成一个新的令牌
  • 更新你的 .env 文件

    CODER_API_KEY=your_coder_api_key
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

• 获取模板 ID：

  • 在浏览器中访问 http://localhost:7080/api/v2/templates（或使用 curl）
  • 找到你创建的模板的 id
  • 更新你的 .env 文件

    CODER_TEMPLATE_ID=your_coder_template_id # 示例：85fb21ba-085b-47a6-9f4d-94ea979aaba9
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

• 获取默认组织 ID：

  • 在浏览器中访问 http://localhost:7080/api/v2/organizations（或使用 curl）
  • 找到你的组织 id（通常是默认的）
  • 更新你的 .env 文件

    CODER_DEFAULT_ORGANIZATION=your_organization_id # 示例：70f6af06-ef3a-4b4c-a663-c03c9ee423bb
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

5. Pad 应用 📝

用于提供构建前端和与 Coder 交互的后端 API 的 FastAPI 应用

• 运行应用程序：
  • 确保 .env 文件中的所有环境变量都已正确设置
  • 运行 pad 应用程序容器

    docker compose up -d pad
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

🎉 恭喜！ 你现在应该能够访问并登录到自托管部署的 pad 应用，地址为 localhost:8000。

资源

• GitHub 仓库：https://github.com/pad-ws/pad.ws

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦