pad.ws：白板与代码编辑器合二为一的创新工具，打造无缝开发体验

前言

2025年4月21日，Coderamp Labs团队正式发布pad.ws，一款将交互式白板与完整云端IDE深度融合的开源开发工具。它彻底打破了“设计用Miro、写代码用VS Code、沟通用Slack”的多工具割裂现状，让开发者可以在同一个浏览器窗口中完成头脑风暴、架构设计、代码编写、调试运行和团队协作的全流程。

截至2026年5月，pad.ws在GitHub已斩获2300+ Star，被全球超过5万名开发者使用，成为Hacker News和Reddit编程社区的热门话题。创始人Romain Courtois表示：“我们的目标是打造一个‘思考即代码’的开发环境，让创意从白板上的草图直接变成可运行的代码，中间没有任何摩擦。”

官方资源：

• 在线体验：https://pad.ws
• GitHub仓库：https://github.com/coderamp-labs/pad.ws
• 官方文档：https://docs.pad.ws
• Discord社区：https://discord.gg/padws

一、核心痛点：为什么我们需要“白板IDE”？

传统软件开发流程中，设计与开发之间存在着巨大的鸿沟：

• 设计师在白板上画出架构图和原型，然后截图发给开发者
• 开发者需要重新理解设计意图，在IDE中从零开始写代码
• 沟通成本极高，一个简单的修改需要在多个工具间来回切换
• 设计逻辑与实现逻辑经常不一致，导致大量返工

pad.ws的核心价值就是消除这个鸿沟，让设计与开发在同一个空间中完成。你可以在白板上画出系统架构，然后直接在旁边打开代码编辑器编写实现；可以在流程图的每个节点上嵌入对应的代码块；可以和团队成员同时在白板上讨论和编码，所有上下文都保持同步。

二、六大核心功能：打造无缝开发体验

2.1 基于Excalidraw的交互式白板：手绘风格的专业绘图

pad.ws采用开源界最受欢迎的Excalidraw作为白板引擎，保留了其标志性的手绘风格和简洁易用的操作体验，同时针对开发场景进行了深度优化：

• 支持绘制流程图、架构图、UML图、线框图、思维导图等所有开发常用图形
• 提供丰富的开发专用形状库，包括服务器、数据库、API、浏览器、手机等
• 支持分层管理、元素锁定、对齐辅助、批量操作等高级功能
• 可以导入导出Excalidraw原生格式，与其他工具无缝兼容

实战示例：你可以在白板上画出一个微服务架构图，然后在每个服务节点上添加注释，标注接口地址和数据格式，最后直接在旁边打开代码编辑器编写该服务的实现代码。

2.2 原生集成VS Code：完整的云端IDE体验

pad.ws不是一个简单的代码编辑器，而是完整的VS Code云端实例，拥有你熟悉的所有功能：

• 语法高亮、智能代码补全、代码导航、重构工具
• 内置调试器，支持Python、JavaScript、Java、Go等100+编程语言
• 完整的文件系统管理，可以创建、编辑、删除文件和文件夹
• 支持安装VS Code扩展，扩展功能无限

你不需要在本地安装任何开发环境，所有代码都运行在云端的Ubuntu虚拟机中。每个pad都有独立的开发环境，互不干扰。

2.3 内置终端：一键运行代码，无需切换窗口

pad.ws在IDE中集成了完整的Linux终端，你可以：

• 安装任何需要的依赖包，如npm install、pip install
• 运行代码和脚本，查看输出结果
• 执行Git命令，提交和拉取代码
• 管理服务器和数据库

终端与代码编辑器无缝集成，你可以在编辑器中编写代码，然后直接在终端中运行，所有操作都在同一个窗口中完成。

2.4 无缝上下文切换：设计与代码融为一体

这是pad.ws最具革命性的功能。你可以在白板的任何位置嵌入代码块，代码块可以直接编辑和运行，运行结果会显示在代码块下方。

工作流示例：

1. 在白板上画出一个登录流程的流程图
2. 在“验证用户名密码”节点旁边嵌入一个Python代码块
3. 编写验证逻辑的代码，点击运行按钮
4. 运行结果直接显示在代码块下方
5. 如果有问题，直接修改代码，再次运行

这种“图中有码，码中有图”的模式，让设计逻辑与实现逻辑完美对应，彻底消除了沟通误解。

2.5 实时多人协作：像Figma一样一起编码

pad.ws支持实时多人协作，体验与Figma完全一致：

• 邀请团队成员加入你的pad，所有人可以同时编辑
• 看到其他人的光标和操作，实时同步所有修改
• 支持评论和标注功能，可以在白板的任何位置添加评论
• 自动保存所有历史版本，随时可以回滚到之前的状态

你可以和团队成员一起在白板上头脑风暴，然后直接开始编码，整个过程就像大家围坐在同一张桌子前一样自然。

2.6 跨设备访问与桌面客户端支持

pad.ws完全基于浏览器运行，你可以在任何设备上访问你的开发环境，包括台式机、笔记本、平板甚至手机。同时，它还支持：

• 用本地VS Code或Cursor连接云端VM，获得更流畅的本地开发体验
• 导出pad为PDF、PNG或Excalidraw格式
• 自托管部署，满足企业的安全和隐私需求

三、技术架构：前后端分离+云端开发环境

pad.ws采用现代化的前后端分离架构，基于Excalidraw和Coder两大开源项目构建，确保了系统的稳定性和可扩展性。

整体架构图（Mermaid）

核心技术栈

• 前端：React + TypeScript + Excalidraw + Monaco Editor
• 后端：FastAPI + WebSocket + PostgreSQL
• 云端开发环境：Coder（提供云端VM和VS Code Web支持）
• 部署：Docker + Kubernetes，支持一键部署到任何云平台

技术亮点

• 每个用户的pad都有独立的Ubuntu VM，完全隔离，安全可靠
• WebSocket实现毫秒级实时同步，多人协作无延迟
• 基于Coder的成熟云端开发环境，稳定性有保障
• 完全开源，支持自定义修改和自托管部署

四、3分钟快速上手

pad.ws的使用非常简单，无需任何安装和配置，3分钟即可开始你的第一个项目。

步骤1：访问官网并登录

1. 打开浏览器，访问 https://pad.ws
2. 使用GitHub账号一键登录（无需注册）
3. 登录后自动进入你的个人工作台

步骤2：创建新pad

1. 点击“Create New Pad”按钮
2. 输入pad名称，选择开发环境模板（默认Ubuntu 22.04）
3. 点击“Create”，系统会自动为你创建一个云端VM和空白白板

步骤3：使用白板

1. 左侧工具栏提供了所有绘图工具，包括矩形、箭头、文本、形状等
2. 拖拽工具到画布上，绘制你的架构图或流程图
3. 双击任何元素可以编辑文本，右键可以打开更多选项

步骤4：添加代码块并运行

1. 点击左侧工具栏的“Code Block”按钮
2. 在画布上拖拽创建一个代码块
3. 选择编程语言，编写代码
4. 点击代码块右上角的“Run”按钮，运行结果会显示在代码块下方

步骤5：分享与协作

1. 点击右上角的“Share”按钮
2. 设置分享权限（只读/可编辑）
3. 复制分享链接，发送给团队成员
4. 团队成员点击链接即可加入协作

完整使用流程（Mermaid流程图）

五、典型应用场景

1. 个人开发：快速原型验证

对于个人开发者来说，pad.ws是一个完美的快速原型工具。你可以在白板上画出你的想法，然后直接编写代码验证，无需搭建复杂的本地开发环境。无论是一个简单的脚本，还是一个完整的Web应用，都可以在pad.ws中快速完成。

2. 团队协作：设计与开发同步

在团队开发中，pad.ws可以作为统一的协作平台。设计师和开发者可以在同一个白板上工作，设计师画出原型，开发者直接在旁边编写代码，所有沟通都在上下文中完成，大幅提升团队效率。

3. 远程教学：可视化编程教学

pad.ws非常适合编程教学。老师可以在白板上画出概念图和流程图，然后直接编写代码演示，学生可以实时看到老师的操作，也可以自己动手实践。所有教学内容都保存在pad中，学生可以随时复习。

4. 代码审查：可视化代码审查

传统的代码审查只能看到代码，看不到设计思路。在pad.ws中，你可以将代码与对应的架构图和流程图放在一起，审查者可以同时看到设计逻辑和实现逻辑，更容易发现问题。

5. 技术分享：交互式演示

做技术分享时，你可以用pad.ws制作交互式演示文稿。在白板上画出架构图，然后嵌入可运行的代码块，演示时直接运行代码，展示实际效果，比静态的PPT更有说服力。

六、与同类工具对比

可以看出，pad.ws是目前唯一一款同时具备专业级白板能力和完整IDE能力的工具，这是它最大的差异化优势。

七、未来规划与现状

pad.ws目前处于Beta测试阶段，所有功能完全免费。官方已经公布了清晰的路线图：

• Step 1（2025年8月）：实时多人协作（已完成）
• Step 2（2026年Q3）：共享云开发环境，支持团队共享VM（开发中）
• Step 3（2026年Q4）：AI Agent集成，支持终端工具和代码生成（规划中）

创始人Romain Courtois表示：“我们的愿景是打造下一代开发环境，让AI成为开发者的真正伙伴。未来，你可以在白板上画出你的想法，AI会自动帮你生成代码，你只需要专注于创意本身。”

结尾

pad.ws的出现，代表了开发工具的一个重要发展方向：融合与一体化。它打破了设计与开发之间的壁垒，让整个开发流程变得更加流畅和高效。对于开发者来说，这不仅是一个工具的升级，更是一种工作方式的变革。

虽然pad.ws还处于早期阶段，但它已经展现出了巨大的潜力。随着AI Agent的集成和功能的不断完善，它很可能会成为未来开发工具的标准形态。如果你还没有体验过，强烈建议去pad.ws试试，它一定会刷新你对开发工具的认知。