Tile Pattern Creator

A lightweight, browser-based tool to build a tile library and paint reusable patterns for tiling teams.

Features

• Add tiles by color or optional image
• Paint patterns on a configurable grid
• Support rectangular tiles (multi-cell)
• Pin a floor tile row at the bottom
• Fill any row with a chosen tile
• Apply a brick-block layout across rows
• Auto-save tile library in the browser
• Import/export the tile library as JSON
• Export JSON for handing off to a tiler
• Export PNG snapshots
• Import JSON to continue a saved pattern

Quick start

Open index.html directly in your browser, or use the optional local server script below.

Optional local server (PowerShell)

./scripts/serve.ps1

Smoke check

./scripts/smoke.ps1

Docker build & push (Gitea Actions)

This repo includes a Gitea Actions workflow in .gitea/workflows/docker.yml.

Required secrets

Set these in your Gitea repo secrets:

• REGISTRY_HOST (e.g. dock.ptslondon.co.uk)
• REGISTRY_USERNAME
• REGISTRY_PASSWORD
• IMAGE_NAME (e.g. team/tiles)

The workflow builds and pushes:

• ${REGISTRY_HOST}/${IMAGE_NAME}:latest
• ${REGISTRY_HOST}/${IMAGE_NAME}:${GITHUB_SHA}

Pattern JSON format

{
  "version": 2,
  "config": {
    "rows": 12,
    "cols": 12,
    "tileSize": 48,
    "floorEnabled": true,
    "floorTileId": "tile-abc"
  },
  "tiles": [
    {
      "id": "tile-abc",
      "name": "Sky Blue",
      "color": "#4c8bf5",
      "width": 2,
      "height": 1,
      "imageData": null
    }
  ],
  "placements": [
    { "id": "place-1", "tileId": "tile-abc", "row": 2, "col": 3, "width": 2, "height": 1 }
  ],
  "grid": [["tile-abc", null]]
}

Tips

• Shift-click or right click to erase a tile.
• Enable “Floor row” to lock the bottom row to a chosen tile.
• Use “Fill row” to quickly paint a full row with a tile.
• Use “Apply brick” to stagger rows in a brick pattern.
• Tile library changes auto-save to your browser storage.
• If you use image tiles, keep images square for best results.