| # playground |
| |
| In-browser playground for Ruff. Available [https://play.ruff.rs/](https://play.ruff.rs/). |
| |
| ## Getting started |
| |
| Use npm 11.10.0 or newer so that the dependency cooldown in `.npmrc` is enforced. |
| |
| Install the NPM dependencies with `npm ci --ignore-scripts`, and run the development server with |
| `npm start --workspace ruff-playground` or `npm start --workspace ty-playground`. |
| You may need to restart the server after making changes to Ruff or ty to re-build the WASM |
| module. |
| |
| To run the datastore, which is based |
| on [Workers KV](https://developers.cloudflare.com/workers/runtime-apis/kv/), |
| run `npm ci --ignore-scripts` and `npm start -- --local` from the `./playground/api` directory |
| to use the locked [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/install-and-update/). |
| The datastore is only required to generate shareable URLs for code snippets. The development datastore does not |
| require Cloudflare authentication or login, but in turn only persists data locally. |
| |
| ## Architecture |
| |
| The playground is implemented as a single-page React application powered by |
| [Vite](https://vitejs.dev/), with the editor experience itself powered by |
| [Monaco](https://github.com/microsoft/monaco-editor). |
| |
| The playground stores state in `localStorage`, but supports persisting code snippets to |
| a persistent datastore based |
| on [Workers KV](https://developers.cloudflare.com/workers/runtime-apis/kv/) |
| and exposed via |
| a [Cloudflare Worker](https://developers.cloudflare.com/workers/learning/how-workers-works/). |
| |
| The playground design is originally based on [Tailwind Play](https://play.tailwindcss.com/), with |
| additional inspiration from the [Biome Playground](https://biomejs.dev/playground/). |
| |
| ## Known issues |
| |
| ### Stack overflows |
| |
| If you see stack overflows in the playground, build the WASM module in release mode: |
| `npm run --workspace ty-playground build:wasm`. |
