pad.ws is a browser-based development environment that merges visual whiteboarding with live coding capabilities. It’s designed for developers, designers, and teams who need to ideate visually and immediately transition to coding without switching tools. By integrating Excalidraw for sketching and Coder for cloud-based development environments, it solves the friction between conceptual planning and implementation.
Technically, pad.ws uses FastAPI for its backend, Excalidraw for the whiteboard interface, and Coder to provision and manage remote development containers. It relies on PostgreSQL for canvas persistence, Redis for session caching, and Keycloak for OIDC-based authentication. The system is deployable via Docker Compose and supports self-hosting on Linux with full control over dev environments.
What You Get
- Interactive Whiteboard - Built with Excalidraw, allows freeform drawing, diagramming, and visual brainstorming directly in the browser with real-time collaboration.
- Full IDE Integration - Embedded terminals and VS Code instances powered by Coder, enabling live coding, debugging, and file editing within the whiteboard canvas.
- Browser-Based Dev Environment - Access your full development workspace from any device with a modern browser—no local setup required.
- Seamless Visual-to-Code Workflow - Switch instantly between sketching architecture diagrams and launching live code sessions without leaving the interface.
- Self-Hostable with Coder - Deploy your own secure, isolated dev environments using Coder’s container-based infrastructure with customizable templates and API keys.
- OIDC Authentication via Keycloak - Enterprise-grade user management with SSO support through Keycloak, including realm, client, and audience configuration for secure access.
Common Use Cases
- Designing system architectures - A software architect sketches a microservices diagram on the whiteboard, then clicks a component to launch a live terminal and inspect running containers.
- Teaching programming concepts - An instructor draws a data flow diagram and instantly opens a shared coding environment to demonstrate code execution in real time.
- Remote pair programming - Two developers collaborate visually on a whiteboard while sharing a single Coder-powered dev environment to code together in real time.
- Prototyping with live backend - A product designer sketches a UI mockup, then connects it to a running backend service in the same window to validate API responses visually.
Under The Hood
Architecture
- Clean separation of frontend and backend using Docker multi-stage builds, ensuring isolated build and runtime environments
- Domain-driven backend design with repository patterns decoupling entities from persistence layers
- Dependency injection via environment variables for external services, with explicit configuration validation
- WebSocket-based real-time collaboration powered by Excalidraw with custom state synchronization and peer coordination
- Auth flow orchestrated through Keycloak OIDC, with backend authentication gate and frontend state management via TanStack Query
- REST API endpoints structured around resource nouns with stateful session handling using cookies and session tokens
Tech Stack
- Node.js and Yarn for building a TypeScript and SCSS-based React frontend bundled into static assets
- Python 3.11 with FastAPI and Pydantic for RESTful APIs, backed by SQLAlchemy and PostgreSQL for ORM-based persistence
- Redis for caching and session management, secured with password authentication and persistence
- Keycloak for OAuth2/OpenID Connect authentication, integrated across backend and Coder platform
- Docker Compose orchestrating a multi-service environment including Coder, Keycloak, PostgreSQL, Redis, and the pad.ws application in a unified host-networked deployment
Code Quality
- Inconsistent error handling with generic try-catch blocks and console.log statements, leading to opaque failure modes
- Backend services lack comprehensive test coverage, with no assertions or mocking of HTTP dependencies
- Type safety is partially enforced but compromised by untyped API responses and insufficient validation guards
- Mixed naming conventions and ambiguous variable usage reduce code clarity and maintainability
- Frontend components follow strong React patterns but suffer from duplicated configurations and unbounded lists
- Absence of enforced linting or code quality tooling results in incomplete files and unhandled edge cases
What Makes It Unique
- Deep integration with Coder’s API to dynamically provision and manage development workspaces directly from within collaborative documents
- Native embedding of full-code editors and terminals as interactive elements within Excalidraw diagrams, turning notes into live environments
- Unified workspace lifecycle control exposed through a state-aware UI that mirrors the user’s remote development environment
- Extensible language selector with deep Monaco editor support embedded directly into annotation interfaces
- Configurable action buttons that adapt to user intent and device capabilities, blending documentation and execution seamlessly
- Seamless OIDC authentication tied to workspace provisioning, ensuring secure, identity-bound development environments that auto-provision on first use