[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73673":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":29,"discoverSource":30},73673,"pad.ws","coderamp-labs\u002Fpad.ws","coderamp-labs","Whiteboard as an IDE, draw and code in your browser","https:\u002F\u002Fpad.ws",null,"TypeScript",4106,232,21,18,0,2,29.1,"MIT License",false,"main",[23,24,25],"cloud","devtool","whiteboard","2026-06-12 02:03:16","# pad.ws -  whiteboard as an IDE 🎨\n\n\n\n[![Pad.ws Canvas IDE](docs\u002Fcanvas_ide.png)](https:\u002F\u002Fpad.ws)\n\n[pad.ws](https:\u002F\u002Fpad.ws) is a whiteboard app that acts as a dev environment in your browser\n\n## ✨ Features\n\n* 🎨 **Interactive Whiteboard** - Draw, sketch and visualize your ideas with Excalidraw\n* 💻 **Fully fledged IDE** - Access terminals and VS Code directly within the whiteboard\n* ☁️ **Browser friendly** - Access your dev env from any device\n* 🔄 **Seamless Workflow** - Switch between visual ideation and coding\n* 🛠️ **Use your own tools** - Access your VM from your desktop client (VS Code & Cursor supported)\n\nThis uses [Excalidraw](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw) for the whiteboard interface while [Coder](https:\u002F\u002Fgithub.com\u002Fcoder\u002Fcoder) powers the cloud development environments.\n\n\n## Try it online  🌐\n\nVisit [pad.ws](https:\u002F\u002Fpad.ws) for an official managed instance. During this beta, we offer free ubuntu dev environments without any setup\n\n## Self-Hosting 🛠️\n\n⚠️ IMPORTANT NOTICE: This repository is in early development stage. The setup provided in `docker-compose.yml` is for development and testing purposes only.\nThis simplified example lets you host pad on `localhost` but is not safe for real-life use without further configurations ⚠️\n\n\n\n\n### ✅ Prerequisites\n*   **Linux Host** (This was tested on Ubuntu only)\n*   **Docker & Docker Compose:** Ensure you have both installed. [Install Docker](https:\u002F\u002Fdocs.docker.com\u002Fget-docker\u002F) \u002F [Install Docker Compose](https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Finstall\u002F)\n\n\n### 1️⃣ .env\n\n*  Copy and review the default values\n    ```bash\n    cp .env.template .env\n    ```\n\n### 2️⃣ PostgreSQL 🐘\n> Ensure persistence for the whole deployment (canvases and configs)\n\n*   Run the PostgreSQL container using the provided configuration (e.g., in your `docker-compose.yml`)\n\n    ```bash\n    docker compose up -d postgres \n    ```\n\n### 3️⃣ Redis 🔄\n> In-memory data store for caching and session management with password authentication\n\n*   Run the Redis container with password authentication\n    ```bash\n    docker compose up -d redis\n    ```\n*   The Redis password is configured in your `.env` file using the `REDIS_PASSWORD` variable\n\n### 4️⃣ Keycloak 🔑\n> OIDC provider for access and user management (within coder and pad app)\n*   Run the Keycloak container\n    ```bash\n    docker compose up -d keycloak \n    ```\n*   Access the Keycloak admin console http:\u002F\u002Flocalhost:8080\n*   **Create a Realm:** Name it appropriately (e.g., `pad-ws`)\n*   **Create a Client:**\n    *   Give it a `Client ID` (e.g., `pad-ws-client`)\n    *   Enable **Client Authentication**\n    *   Add * to the valid redirect urls\n    *   You can leave other settings as default for now\n*   **Get Credentials:**\n    *   Navigate to `Clients` -> `[Your Client ID]` -> `Credentials` tab\n    *   Note the **Client secret**.\n    *   Update your environment variables file (`.env`) with:\n        ```dotenv\n        OIDC_REALM=your_oidc_realm\n        OIDC_CLIENT_ID=your_client_id \n        OIDC_CLIENT_SECRET=your_client_secret \n        ```\n*   **Create a User:**\n    *   Navigate to `Users` -> `Create user`\n    *   Fill in the details\n    *   **Important:** Tick `Email verified`\n    *   Go to the `Credentials` tab for the new user and set a password\n*   **Create an Audience:**\n    *   Navigate to `Clients` -> `[Your Client ID]` -> `Client Scopes`\n    *   Click on the dedicated scope of your Client (`[clientid]-dedicated`)\n    *   Click on `Configure a new mapper`\n    *   Then click on `Audience`\n    *   Ensure `Included Client Audience` matches your `Client ID`\n    *   Ensure `Add to access token` is On\n    \n### 5️⃣ Coder 🧑‍💻\n\n*   **Find Docker Group ID:** You'll need this to grant necessary permissions\n    ```bash\n    getent group docker | cut -d: -f3 \n    ```\n*   Update your `.env` file with the `DOCKER_GROUP_ID`:\n    ```dotenv\n    DOCKER_GROUP_ID=your_docker_group_id \n    ```\n*   Run the Coder container.\n    ```bash\n    docker compose up -d coder\n    ```\n*   **Access Coder UI:** Open [localhost:7080](http:\u002F\u002Flocalhost:7080) in your browser\n*   **First Login:** Create an administrator user (e.g., `admin`)\n*   **Create a Template:**\n    *   Use the \"Start from template\" option.\n    *   Choose a base image (e.g., `docker-containers` or a simple Ubuntu). Configure it as needed\n*   **Generate API Key:**\n    *   Click your profile picture (top right) -> `Account` -> `API Keys`\n    *   Generate a new token\n    *   Update your `.env`\n        ```dotenv\n        CODER_API_KEY=your_coder_api_key \n        ```\n*   **Get Template ID:**\n    *   Visit `http:\u002F\u002Flocalhost:7080\u002Fapi\u002Fv2\u002Ftemplates` in your browser (or use `curl`)\n    *   Find the `id` of the template you created\n    *   Update your `.env`\n        ```dotenv\n        CODER_TEMPLATE_ID=your_coder_template_id # Example: 85fb21ba-085b-47a6-9f4d-94ea979aaba9\n        ```\n*   **Get Default Organization ID:**\n    *   Visit `http:\u002F\u002Flocalhost:7080\u002Fapi\u002Fv2\u002Forganizations` in your browser (or use `curl`)\n    *   Find the `id` of your organization (usually the default one)\n    *   Update your `.env`:\n        ```dotenv\n        CODER_DEFAULT_ORGANIZATION=your_organization_id # Example: 70f6af06-ef3a-4b4c-a663-c03c9ee423bb\n        ```\n*   **If you use a custom name for your workspace:**\n    *   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`.\n\n### 6️⃣ Pad App 📝\n> The fastAPI app that both serves the build frontend and the backend API to interface with Coder\n\n*   **Run the Application:**\n    *   Ensure all environment variables in your `.env` file are correctly set\n    *   Run the `pad` application container\n\n        ```bash\n        docker compose up -d pad \n        ```\n\n🎉 **Congratulations!**  You should now be able to access and login to your self-hosted pad at [localhost:8000](http:\u002F\u002Flocalhost:8000) \n\n🚧 *Did you have any issue while following this guide?*\n\n*Please [let us know](https:\u002F\u002Fgithub.com\u002Fpad-ws\u002Fpad.ws\u002Fissues) so we can improve the onboarding flow*\n\n## 🚀 Project Growth\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=pad-ws\u002Fpad.ws&type=Date)](https:\u002F\u002Fstar-history.com\u002F#pad-ws\u002Fpad.ws&Date)\n","pad.ws 是一个将白板功能与开发环境相结合的在线IDE，允许用户在浏览器中绘制和编写代码。其核心功能包括基于Excalidraw的交互式白板、完全集成的IDE（支持终端访问及VS Code）、跨设备友好以及无缝的工作流程切换。技术上，它利用了Coder提供的云开发环境，并通过Docker进行自托管部署。适合需要可视化构思同时进行编程的开发者或团队使用，尤其是在远程协作场景下能够极大提高效率。目前项目处于早期开发阶段，提供了简易的本地部署指南以供测试。","2026-06-11 03:46:53","high_star"]