SDK Sandbox

A browser-based sandbox for running Python, Node.js, and PHP code samples. Uses CodeMirror for editing, with in-browser execution via Pyodide (Python), WebContainers (Node), and php-wasm (PHP). Share snippets via the backend (Go + SQLite).

Run locally

Backend (Go + SQLite)

cd backend
go build -o sandbox-backend .
./sandbox-backend

Listens on http://localhost:8080. Uses sandbox.db in the current directory for shared snippets.

Frontend (Vite)

cd frontend
npm install
npm run dev

Open http://localhost:5173. The dev server proxies /api to the backend.

Usage

1. Choose Language: Python, Node.js, or PHP.
2. Edit code in the editor.
3. Click Run to execute in the browser (first run may load the runtime).
4. Click Share to save and copy a link (e.g. http://localhost:5173/#/s/abc12xyz). Open that link to load the snippet.

Stack

• Frontend: Vite, CodeMirror 6, Pyodide (CDN), WebContainers, php-wasm (CDN).
• Backend: Go 1.22, SQLite (go-sqlite3), REST API for share (POST/GET).

Commit boundaries

Use small, reviewable commits that each do one job. For this repo, prefer these boundaries:

1. Backend API/data model

   • Files: backend/main.go, backend/go.mod, migrations/schema-related changes.
   • Includes: share API behavior, DB schema, request/response contracts.

2. Runtime execution behavior (language-specific)

   • Files: frontend/src/main.js runtime sections.
   • Includes: Python/Pyodide install/run flow, Node/WebContainer install/run flow, PHP run/fetch bridge changes.
   • Split by language if possible (e.g. one commit for Python runtime fix, one for Node).

3. IDE/UX behavior

   • Files: frontend/index.html, frontend/src/style.css, UI portions of frontend/src/main.js.
   • Includes: file tree, dirty markers, reset button, persistence UX, URL state UX.

4. Persistence/sharing behavior

   • Files: backend + frontend where share or local draft persistence changes.
   • Includes: share payload format, localStorage shape, URL conventions.
   • Keep API contract updates and consumer updates in the same commit if tightly coupled.

5. Docs/chore only

   • Files: README.md, comments, non-functional cleanup.
   • No behavior changes mixed in.

Commit message style

Use an imperative subject plus a brief why-focused body.

• fix(python): allow top-level await in Pyodide runner
• feat(ui): persist selected language in URL and localStorage
• fix(node): handle string chunks in WebContainer output decoder
• docs: add commit boundary guidelines

What not to mix

• Backend API changes + unrelated CSS/UI polish.
• Dependency install logic changes for multiple languages in one commit, unless required by one shared refactor.
• Functional changes + broad formatting churn.