Sandbox is an open-source cloud-based code editing environment with custom AI code autocompletion and real-time collaboration.
Check out the Twitter thread with the demo video!
Check out this guide made by @jamesmurdza on setting it up locally!
Note: For links in
.envfiles, do not include a trailing slash
Install dependencies
cd frontend
npm installAdd the required environment variables in .env (example file provided in .env.example). You will need to make an account on Clerk and Liveblocks to get API keys.
Then, run in development mode
npm run devThe backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a service binding to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
You will need to make an account on E2B to get an API key.
Install dependencies
cd backend/server
npm installAdd the required environment variables in .env (example file provided in .env.example)
Project files will be stored in the projects/<project-id> directory. The middleware contains basic authorization logic for connecting to the server.
Run in development mode
npm run devThis directory is dockerized, so feel free to deploy a container on any platform of your choice! I chose not to deploy this project for public access due to costs & safety, but deploying your own for personal use should be no problem.
Directories:
/backend/database: D1 database/backend/storage: R2 storage/backend/ai: Workers AI
Install dependencies
cd backend/database
npm install
cd ../storage
npm install
cd ../ai
npm installRead the documentation to learn more about workers.
For each directory, add the required environment variables in wrangler.toml (example file provided in wrangler.example.toml). For the AI worker, you can define any value you want for the CF_AI_KEY -- set this in other .env files to authorize access.
Run in development mode
npm run devDeploy to Cloudflare with Wrangler
npx wrangler deployThanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free to reach out to @ishaandey_.
Please prioritize existing issues, but feel free to contribute new issues if you have ideas for a feature or bug that you think would be useful.
frontend/
├── app
├── assets
├── components
└── lib
backend/
├── server
├── database/
│ ├── src
│ └── drizzle
├── storage
└── ai
| Path | Description |
|---|---|
frontend |
The Next.js application for the frontend. |
backend/server |
The Express websocket server. |
backend/database |
API for interfacing with the D1 database (SQLite). |
backend/storage |
API for interfacing with R2 storage. Service-bound to /backend/database. |
backend/ai |
API for making requests to Workers AI . |
You can fork this repo by clicking the fork button in the top right corner of this page.
git clone https://github.com/<your-username>/sandbox.git
cd sandboxgit checkout -b my-new-branchBefore you create a Pull Request, please check that you use the Conventional Commits format
It should be in the form category(scope or module): message in your commit message from the following categories:
-
feat / feature: all changes that introduce completely new code or new features -
fix: changes that fix a bug (ideally you will additionally reference an issue if present) -
refactor: any code related change that is not a fix nor a feature -
docs: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage) -
chore: all changes to the repository that do not fit into any of the above categoriese.g.
feat(editor): improve tab switching speed
