pad.ws is a browser-native development environment that merges the visual freedom of an interactive whiteboard with the full power of a cloud-based IDE. Built on Excalidraw for sketching and Coder for backend development environments, it enables developers to transition fluidly between brainstorming diagrams and live code execution without leaving the browser. This tool is designed for developers, designers, and teams who benefit from visual problem-solving—such as system architects mapping microservices or product teams planning features—while retaining access to real terminals, VS Code, and Docker-based workspaces. Unlike traditional IDEs, pad.ws prioritizes spatial ideation alongside functional coding, making it ideal for collaborative planning and rapid prototyping.
While the public instance at pad.ws offers free Ubuntu-based dev environments, self-hosting requires configuring Keycloak for authentication, Redis for sessions, PostgreSQL for persistence, and Coder for containerized workspaces. The project is currently in early development, and the provided docker-compose setup is explicitly labeled as non-production-ready without additional security hardening.
What You Get
- Interactive Whiteboard - Integrated Excalidraw canvas for drawing diagrams, flowcharts, and sketches directly in the browser with real-time collaboration support.
- Fully fledged IDE - Embedded terminal and VS Code editor accessible within the whiteboard interface, allowing code editing alongside visual notes.
- Browser-friendly Dev Environment - Access your full development workspace from any device with a modern browser—no local tooling required.
- Seamless Workflow - Switch between visual ideation and code execution without context switching; sketches can directly inform live coding sessions.
- Use Your Own Tools - Connect your local VS Code or Cursor IDE to the remote Coder-powered development environment via SSH or web-based integration.
Common Use Cases
- Building system architecture diagrams with live code - Architects sketch microservice interactions on the whiteboard, then instantly open a terminal to deploy and test those services in a matching environment.
- Collaborative product prototyping - Designers and engineers co-create UI flows on the whiteboard, then pair-program to build the frontend directly in the embedded VS Code instance.
- Problem → Solution flow: No local dev setup needed - A developer needs to test a Docker-based app but has no Linux machine; they open pad.ws, get an instant Ubuntu dev environment with Docker, and start coding without installing anything locally.
- Team workflow for remote pair programming - Distributed teams use pad.ws to visually map out bugs or features on a shared canvas, then jump into the same terminal session to debug together in real time.
Under The Hood
This project is a collaborative development environment that merges a Python backend with a TypeScript frontend, enabling real-time pad-based editing within Coder workspaces. It emphasizes seamless user authentication through OIDC and integrates with external services for workspace management and caching.
Architecture
This project adopts a modular monolithic architecture with clear separation between backend and frontend components, leveraging domain-driven design principles.
- The backend is structured into distinct modules for database, cache, and authentication, each with well-defined responsibilities
- Dependency injection is used for session management, and the Redis client follows a singleton pattern for efficient caching
- Domain entities like Pad, Session, and User coordinate interactions across database, cache, and external APIs
- Component communication is managed through explicit dependencies and domain-specific logic
Tech Stack
Built using modern web technologies, the project combines Python and TypeScript to deliver a scalable and developer-friendly platform.
- The backend is powered by FastAPI with Python 3.11, while the frontend uses React 19 and TypeScript for type safety
- Key backend dependencies include Redis for caching and SQLAlchemy for database operations
- The frontend leverages Vite, SCSS, and React ecosystem tools such as @tanstack/react-query and monaco-editor
- Docker-based deployment is supported with environment configuration via .env files and CI/CD pipeline setup
Code Quality
The codebase shows a balanced level of organization and consistency, with some areas requiring improvement in testing and error handling.
- Configuration management is comprehensive, utilizing environment variables and configuration files for flexibility
- Error handling includes logging and graceful degradation, particularly in Redis client initialization
- Modular organization is evident across backend modules, though some technical debt remains in database and API client design
- Code structure demonstrates clear separation of concerns, but lacks extensive test coverage to validate behavior
What Makes It Unique
This project stands out through its integration with Coder and OIDC, offering a unique developer-first approach to collaborative editing.
- Tight integration with Coder API enables automated workspace provisioning and user management within the platform
- Real-time collaborative editing is implemented with custom canvas rendering and session coordination
- The architecture supports extensibility, allowing for new pad types or editing modes to be added with minimal disruption
- OIDC-based authentication includes automatic session refresh and seamless integration with external identity providers