ruff/playground/README.md
Dan Parizher eee5a5a3d6
[docs] Typo fix for playground (#18929)
<!--
Thank you for contributing to Ruff/ty! To help us out with reviewing,
please consider the following:

- Does this pull request include a summary of the change? (See below.)
- Does this pull request include a descriptive title? (Please prefix
with `[ty]` for ty pull
  requests.)
- Does this pull request include references to any relevant issues?
-->

## Summary

<!-- What's the purpose of the change? What does it do, and why? -->

I saw the smallest typo while familiarizing myself with the playground,
it bothered me so much I just had to make a PR for it 😂
2025-06-24 21:01:48 -04:00

40 lines
1.7 KiB
Markdown

# playground
In-browser playground for Ruff. Available [https://play.ruff.rs/](https://play.ruff.rs/).
## Getting started
Install the NPM dependencies with `npm install`, 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/),
install the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/install-and-update/),
then run `npx wrangler dev --local` from the `./playground/api` directory. Note that 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`.