8000 GitHub - centopw/pad.ws: Whiteboard as an IDE, draw and code in your browser
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

centopw/pad.ws

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

🚀 Project Growth

Star History Chart

About

Whiteboard as an IDE, draw and code in your browser

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 48.9%
  • Python 38.5%
  • SCSS 11.6%
  • Dockerfile 0.4%
  • HTML 0.3%
  • Mako 0.2%
  • Shell 0.1%
0