To render a game for the browser use the @replay/web package.

renderCanvas(game, options)


  • game: Your Top-Level Game Sprite called with its props passed in, e.g. Game(gameProps).
  • options: An object with the following properties:
    • loadingTextures: (Optional) An array of textures to show while the game is loading.
    • assets: (Optional) An object containing image and audio file names to load.
    • dimensions: (Optional) A string that is either:
      • "game-coords": (default) Use the game coordinates as pixels in the browser.
      • "scale-up": Scales the game so that it fills up the browser window.
    • nativeSpriteMap: (Optional) A map of Native Sprite names and their web implementation.
    • canvas: (Optional) A canvas element to render to. If omitted, Replay will create a canvas in the document.
    • windowSize: (Optional) An object with width and height fields. Use to override the view size, instead of using the window size.
import { renderCanvas } from "@replay/web";
import { t } from "@replay/core";
import { Game, gameProps } from "../src";
const loadingTextures = [
color: "black",
text: "Loading...",
renderCanvas(Game(gameProps), {
imageFileNames: ["player.png"],
audioFileNames: ["shoot.wav"],
dimensions: "scale-up",

mapInputCoordinates(getLocalCoords, inputs)

This can be used by Replay Test, see the docs there for more info.


The device.inputs parameter of Sprite methods is of type:

type WebInputs = {
keysDown: KeysPressed;
keysJustPressed: KeysPressed;
pointer: {
pressed: boolean;
numberPressed: number; // multi-touch
justPressed: boolean;
justReleased: boolean;
x: number;
y: number;
type KeysPressed = {
[key: string]: true | undefined;

The keys of KeysPressed are based on the key value of browser keyboard events. See keycode.info for values of event.key.

justPressed is only true for one frame after an input is pressed, justReleased for one frame after an input is released.


loop({ device, state }) {
let { x } = state;
// Move when space bar is down
if (device.inputs.keysDown[" "]) {
x += 5;
return { ...state, x };