Repository files navigation

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

• 🎨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 usesExcalidraw for the whiteboard interface whileCoder powers the cloud development environments.

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

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

• Linux Host (This was tested on Ubuntu only)
• Docker & Docker Compose: Ensure you have both installed.Install Docker /Install Docker Compose

• Copy and review the default values

  cp .env.template .env

Ensure persistence for the whole deployment (canvases and configs)

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

  docker compose up -d postgres

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 theREDIS_PASSWORD variable

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 consolehttp://localhost:8080
• Create a Realm: Name it appropriately (e.g.,pad-ws)
• Create a Client:
  • Give it aClient ID (e.g.,pad-ws-client)
  • EnableClient Authentication
  • Add * to the valid redirect urls
  • You can leave other settings as default for now
• Get Credentials:
  • Navigate toClients ->[Your Client ID] ->Credentials tab
  • Note theClient secret.
  • Update your environment variables file (.env) with:

    OIDC_REALM=your_oidc_realmOIDC_CLIENT_ID=your_client_idOIDC_CLIENT_SECRET=your_client_secret

• Create a User:
  • Navigate toUsers ->Create user
  • Fill in the details
  • Important: TickEmail verified
  • Go to theCredentials tab for the new user and set a password
• Create an Audience:
  • Navigate toClients ->[Your Client ID] ->Client Scopes
  • Click on the dedicated scope of your Client ([clientid]-dedicated)
  • Click onConfigure a new mapper
  • Then click onAudience
  • EnsureIncluded Client Audience matches yourClient ID
  • EnsureAdd to access token is On

• Find Docker Group ID: You'll need this to grant necessary permissions

  getent group docker| cut -d: -f3

• Update your.env file with theDOCKER_GROUP_ID:

  DOCKER_GROUP_ID=your_docker_group_id

• Run the Coder container.

  docker compose up -d coder

• Access Coder UI: Openlocalhost: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:
  • Visithttp://localhost:7080/api/v2/templates in your browser (or usecurl)
  • Find theid 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:
  • Visithttp://localhost:7080/api/v2/organizations in your browser (or usecurl)
  • Find theid 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 asCODER_WORKSPACE_NAME in your.env. Otherwise, it will assume your workspace name is the default we chose:ubuntu.

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 thepad application container

    docker compose up -d pad

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

🚧Did you have any issue while following this guide?

Pleaselet us know so we can improve the onboarding flow