Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Abstract Play Renderer

Build Status

This private NPM module graphically renders game states. This repository houses the authoritative JSON schema.

Currently the only supported output format is SVG.


If you want to create a new set of graphics, then I'm afraid you have to get your hands a little dirty. You will need to learn TypeScript and SVG.js. For now, see the src/sheets/default.ts file for how this works. Once complete, submit a pull request and I'll consider it.

Detailed instructions will appear here once the API is stable. For now, here's just a collection of points so I don't forget them:

  • The size of SVG you return is irrelevant. It will be scaled by the renderer as appropriate. Use whatever size is convenient for you.
  • The renderer will check each figure for an element with the id playerfill and fill that element with the colour for the given player based on the options passed to the renderer (e.g., colour-blind palette).


The main website houses the development blog and wiki.


This is a basic NPM module; it's just private. It's not meant to be generally useful to anyone outside of myself. It is designed specifically for Abstract Play. If someone does use this elsewhere, let me know :)

  • Clone the repo.
  • From the newly created folder, run the following commands:
    • npm install (installs dependencies)
    • npm run test (makes sure everything is working)
    • npm run build (compiles the TypeScript files into the ./build folder)
    • npm run dist-dev (or dist-prod if you want it minified; bundles everything for the browser into the ./dist folder)


Renders Abstract Play game states graphically




No packages published