mirror of
https://github.com/astral-sh/ruff.git
synced 2025-09-28 21:05:08 +00:00
30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
# playground
|
|
|
|
In-browser playground for Ruff. Available [https://play.ruff.rs/](https://play.ruff.rs/).
|
|
|
|
## Getting started
|
|
|
|
In order to build the WASM module install [`wasm-pack`](https://rustwasm.github.io/wasm-pack/).
|
|
|
|
Next, build the WASM module by running `npm run build:wasm` (release build) or `npm run dev:wasm` (debug build) from the `./playground` directory.
|
|
|
|
Finally, install TypeScript dependencies with `npm install`, and run the development server with `npm run dev`.
|
|
|
|
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/db` 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 [Rome Tools Playground](https://docs.rome.tools/playground/).
|