WASM playgrounds

Two crates expose Ruff and ty to a browser playground at https://play.ruff.rs.

Crates

• crates/ruff_wasm/ — exposes lint, format, and helpers via wasm-bindgen.
• crates/ty_wasm/ — exposes check, infer, hover, and goto-definition entry points.

Both compile to wasm32-unknown-unknown and are loaded asynchronously by the JavaScript frontend.

Frontend

playground/ is a TypeScript project (Vite + React) that wraps the WASM modules. Build:

cd playground
npm install
npm run dev      # local dev server
npm run build    # production bundle

The deployed site at https://play.ruff.rs/ is built from this directory. The ty playground is a sibling and shares the build pipeline.

Architecture

graph LR
    Browser[browser]
    Frontend[playground/<br/>TS + React]
    RuffWasm[ruff_wasm.wasm]
    TyWasm[ty_wasm.wasm]
    RuffLinter[ruff_linter]
    RuffFormatter[ruff_python_formatter]
    TySemantic[ty_python_semantic]

    Browser --> Frontend
    Frontend --> RuffWasm
    Frontend --> TyWasm
    RuffWasm --> RuffLinter
    RuffWasm --> RuffFormatter
    TyWasm --> TySemantic

The browser-side System implementation in ruff_db provides an in-memory file system, since there is no host file system in the browser. This is one of the reasons the file-system abstraction exists in the first place.

Building manually

# Ruff
wasm-pack build crates/ruff_wasm --target web --out-dir ../../playground/ruff/pkg

# ty
wasm-pack build crates/ty_wasm --target web --out-dir ../../playground/ty/pkg

The npm scripts in playground/ invoke wasm-pack with the right flags.

What changes if you modify them

• New rules and formatter behavior automatically reach the playground after the wasm crates are rebuilt.
• New WASM-only entry points (e.g. exposing a new function) require explicit #[wasm_bindgen] annotations in the wasm crate and corresponding TS bindings.

Limitations

• File-system access is in-memory only.
• ty's incremental story works in WASM but starts cold every page load.
• LSP-style multi-file projects require simulating workspace state in JS.