| # 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`. |