Docs / Guides

Developer Guides

Step-by-step guides covering the plugin system and integration patterns. Each builds a working example from scratch.

Guide 1: Colony — Building a Game Plugin

Build a complete Catan-style board generator from an empty file. Covers:

  • HexApp.registerGame() — registering a new game plugin
  • generate() — terrain pools, seeded randomisation, hex grid generation
  • getColors() — flat colour maps for classic mode
  • getImages() — tile image paths for artistic/kenney/realistic modes
  • constraints() — placement rules with automatic retry
  • Layouts — board size variants that replace the size selector
  • rendererOptions() — hex size and orientation overrides
  • Number token overlays with colour coding

Start the Colony guide

Guide 2: SVG Integration — Maps in External Projects

Export hex maps as SVG and integrate them into documentation, rulebooks, or other web projects. Covers:

  • hexmap:exportSvg postMessage command — requesting SVG from an embedded generator
  • HexSvg.toSVG() — direct SVG generation from hex data
  • HexSvg.toAnnotatedSVG() — adding highlights, tokens, arrows, and legends
  • Image modes: linked vs embedded (data URI) tile images
  • Sizing and viewBox for print/PDF contexts
  • Integration pattern used by moddable-rules (iframe → postMessage → SVG → PDF)

Start the SVG Integration guide

Which Guide Do I Need?

If you want to...Read
Create a new hex game pluginColony guide
Export maps as SVG filesSVG Integration guide
Embed maps without an iframe (SDK)API: Consumer SDK
Embed maps via iframeAPI: Embedding
Control an embedded map via JavaScriptAPI: postMessage Bridge
Use hex maps from an AI assistantAPI: MCP Server