Specification

Pixel Art Notation Language

Version 0.1 ยท Deterministic JSON notation for pixel-perfect assets.

Overview

PANL defines single-asset render specs with integer-only coordinates, hex/palette colors, strict schema validation, and deterministic raster rendering.

Root Structure

Root Spec

{ version, canvas, palette?, seed?, definitions?, asset }

Top-level document for a single asset render.

FieldTypeRequiredDescription
versionstringyesNotation version tag, currently "0.1".
canvas{ width: int, height: int }yesFixed output canvas size.
palette{ colors: Record<string, hex> }noNamed colors referenced via @token.
seedintnoRequired when dither is used.
definitionsRecord<string, command>noReusable named command definitions.
asset{ id: string, commands: command[] }yesAsset identifier and render command list.

Commands

Primitives

iso_prism iso_prism(x, y, w, h, depth, topFill, leftFill, rightFill, outline?)

Isometric block primitive with top, left, and right faces.

iso_tile iso_tile(x, y, w, h, fill, outline?)

Flat isometric diamond (top-face only).

rect rect(x, y, w, h, fill? | stroke?)

Axis-aligned rectangle primitive.

line line(x1, y1, x2, y2, color, width?)

Integer-based raster line primitive.

polygon polygon(points, fill? | stroke?)

Custom polygon primitive with integer points.

use use(ref, transform?, overrides?)

Reference a named definition and apply allowed overrides.

Helpers

color hex | @paletteToken

Color input accepted by draw commands.

transform { translateX?, translateY?, flipX?, flipY? }

Integer transform properties applied in local coordinates.

dither { pattern: "checker", color, offsetX?, offsetY? }

Optional checker overlay for selected primitives.

Example

{
  "version": "0.1",
  "canvas": {
    "width": 256,
    "height": 256
  },
  "palette": {
    "colors": {
      "grassTop": "#7EC850",
      "grassLeft": "#5A9E34",
      "grassRight": "#3D6622",
      "outline": "#20252E"
    }
  },
  "asset": {
    "id": "grass_block",
    "commands": [
      {
        "type": "iso_prism",
        "x": 128,
        "y": 72,
        "w": 32,
        "h": 16,
        "depth": 16,
        "topFill": "@grassTop",
        "leftFill": "@grassLeft",
        "rightFill": "@grassRight",
        "outline": "@outline"
      }
    ]
  }
}