About pad.ws

Whiteboard as an IDE, draw and code in your browser

c

Published by

coderamp-labs

Visit View Profile

README.md

View on GitHub

pad.ws - whiteboard as an 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

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

1️⃣ .env

Copy and review the default values
```
 cp .env.template .env
```

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
```
docker compose up -d pad 
```

🎉 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

pad.ws