GitHub - coderamp-labs/pad.ws: Whiteboard as an IDE, draw and code in your browser

4 min read Original article ↗

pad.ws - whiteboard as an IDE 🎨

Pad.ws Canvas IDE

pad.ws is a whiteboard app that acts as a dev environment in your browser

✨ Features

  • 🎨 Interactive Whiteboard - Draw, sketch and visualize your ideas with Excalidraw
  • 💻 Fully fledged IDE - Access terminals and VS Code directly within the whiteboard
  • ☁️ Browser friendly - Access your dev env from any device
  • 🔄 Seamless Workflow - Switch between visual ideation and coding
  • 🛠️ Use your own tools - Access your VM from your desktop client (VS Code & Cursor supported)

This uses Excalidraw for the whiteboard interface while Coder powers the cloud development environments.

Try it online 🌐

Visit pad.ws for an official managed instance. During this beta, we offer free ubuntu dev environments without any setup

Self-Hosting 🛠️

⚠️ IMPORTANT NOTICE: This repository is in early development stage. The setup provided in docker-compose.yml is for development and testing purposes only. This simplified example lets you host pad on localhost but is not safe for real-life use without further configurations ⚠️

✅ Prerequisites

1️⃣ .env

  • Copy and review the default values

2️⃣ PostgreSQL 🐘

Ensure persistence for the whole deployment (canvases and configs)

  • Run the PostgreSQL container using the provided configuration (e.g., in your docker-compose.yml)

    docker compose up -d postgres

3️⃣ Redis 🔄

In-memory data store for caching and session management with password authentication

  • Run the Redis container with password authentication 
    docker compose up -d redis
  • The Redis password is configured in your .env file using the REDIS_PASSWORD variable

4️⃣ Keycloak 🔑

OIDC provider for access and user management (within coder and pad app)

  • Run the Keycloak container 
    docker compose up -d keycloak
  • Access the Keycloak admin console http://localhost:8080
  • Create a Realm: Name it appropriately (e.g., pad-ws)
  • Create a Client:
    • Give it a Client ID (e.g., pad-ws-client)
    • Enable Client Authentication
    • Add * to the valid redirect urls
    • You can leave other settings as default for now
  • Get Credentials:
    • Navigate to Clients -> [Your Client ID] -> Credentials tab
    • Note the Client secret.
    • Update your environment variables file (.env) with: 
      OIDC_REALM=your_oidc_realm
OIDC_CLIENT_ID=your_client_id 
OIDC_CLIENT_SECRET=your_client_secret
  • Create a User:
    • Navigate to Users -> Create user
    • Fill in the details
    • Important: Tick Email verified
    • Go to the Credentials tab for the new user and set a password
  • Create an Audience:
    • Navigate to Clients -> [Your Client ID] -> Client Scopes
    • Click on the dedicated scope of your Client ([clientid]-dedicated)
    • Click on Configure a new mapper
    • Then click on Audience
    • Ensure Included Client Audience matches your Client ID
    • Ensure Add to access token is On

5️⃣ Coder 🧑‍💻

  • Find Docker Group ID: You'll need this to grant necessary permissions 
    getent group docker | cut -d: -f3
  • Update your .env file with the DOCKER_GROUP_ID: 
    DOCKER_GROUP_ID=your_docker_group_id
  • Run the Coder container. 
    docker compose up -d coder
  • Access Coder UI: Open localhost:7080 in your browser
  • First Login: Create an administrator user (e.g., admin)
  • Create a Template:
    • Use the "Start from template" option.
    • Choose a base image (e.g., docker-containers or a simple Ubuntu). Configure it as needed
  • Generate API Key:
    • Click your profile picture (top right) -> Account -> API Keys
    • Generate a new token
    • Update your .env 
      CODER_API_KEY=your_coder_api_key
  • Get Template ID:
    • Visit http://localhost:7080/api/v2/templates in your browser (or use curl)
    • Find the id of the template you created
    • Update your .env 
      CODER_TEMPLATE_ID=your_coder_template_id # Example: 85fb21ba-085b-47a6-9f4d-94ea979aaba9
  • Get Default Organization ID:
    • Visit http://localhost:7080/api/v2/organizations in your browser (or use curl)
    • Find the id of your organization (usually the default one)
    • Update your .env: 
      CODER_DEFAULT_ORGANIZATION=your_organization_id # Example: 70f6af06-ef3a-4b4c-a663-c03c9ee423bb
  • If you use a custom name for your workspace:
    • You need to provide the name as CODER_WORKSPACE_NAME in your .env. Otherwise, it will assume your workspace name is the default we chose: ubuntu.

6️⃣ Pad App 📝

The fastAPI app that both serves the build frontend and the backend API to interface with Coder

  • Run the Application:

    • Ensure all environment variables in your .env file are correctly set

    • Run the pad application container

🎉 Congratulations! You should now be able to access and login to your self-hosted pad at localhost:8000

🚧 Did you have any issue while following this guide?

Please let us know so we can improve the onboarding flow

🚀 Project Growth

Star History Chart