Renderer documentation
The Abstract Play renderer turns a JSON render representation into SVG board images. Every game implements render() to produce this JSON; the front end and designer pass it to APRender.render().
Schema version: see Schema reference (auto-generated from schema.json).
Quick links
- Concepts — board, pieces, legend, areas, annotations
- Boards — board styles and topology
- Glyphs — piece appearance
- Contact sheet — all sheet piece names
- Adding pieces — contributor guide for new sheet artwork
- Formatting — labels, rotation, tiling
- Markers — board decorations under pieces
- Annotations — move highlights
- Engines — specialized renderers
- Playground samples — snippet catalog, browser tests, how to add examples
- Schema reference — full enum/property listing
Full playground
For advanced controls (colour context, rotation presets, settings JSON), use the standalone playground — it is not part of this docs site:
To run it locally from the renderer repo: npm run playground:serve (Vite on port 3000, sources under playground/). To build a static copy like deploy, use npm run playground (writes dist/). See Playground samples for snippet workflow and browser tests.
Interactive examples on this site
Many pages include embedded editors where you can tweak JSON and see the SVG update live. For the full sample library, open the playground above.
Last verified against schema in src/schemas/schema.json on the develop branch.