Element Reference

Example

{
  "type": "text",
  "bounds": {"x": 10, "y": 10, "width": 100, "height": 10},
  "link": "https://example.com",
  "text": {
    "content": "Visit our website",
    "color": {"r": 0, "g": 102, "b": 204}
  }
}

Dynamic Link with Data Binding

{
  "type": "image",
  "bounds": {"x": 10, "y": 10, "width": 30, "height": 15},
  "link": "{{companyUrl}}",
  "image": {"src": "{{companyLogo}}", "fitMode": "contain"}
}

Example

{
  "page": {"format": "A4"},
  "background": [
    {
      "type": "image",
      "bounds": {"x": 0, "y": 0, "width": 210, "height": 297},
      "image": {
        "src": "https://example.com/bg-pattern.png",
        "fitMode": "fill",
        "opacity": 0.1
      }
    },
    {
      "type": "image",
      "bounds": {"x": 10, "y": 10, "width": 30, "height": 15},
      "image": {"src": "{{companyLogo}}", "fitMode": "contain"}
    },
    {
      "type": "text",
      "bounds": {"x": 10, "y": 280, "width": 190, "height": 10},
      "text": {
        "content": "Page {{page}} of {{totalPages}}",
        "fontSize": 9,
        "hAlign": "center",
        "color": {"r": 128, "g": 128, "b": 128}
      }
    }
  ],
  "elements": [
    {"type": "text", "page": 1, "bounds": {...}, "text": {"content": "Page 1 content"}},
    {"type": "text", "page": 2, "bounds": {...}, "text": {"content": "Page 2 content"}}
  ]
}

How It Works

The background array accepts the same element types as elements. Background elements:

• Render behind page content (drawn first on each page)
• Appear on every page automatically
• Support data binding including {{page}} and {{totalPages}}
• Images are deduplicated - the same image used on 100 pages is stored only once

Example

{
  "page": {
    "format": "A4",
    "orientation": "portrait",
    "margins": {
      "top": 10,
      "bottom": 10,
      "left": 15,
      "right": 15
    }
  },
  "elements": [...]
}

Page Properties

Standard Page Sizes

Example

{
  "page": {"format": "A4"},
  "labelGrid": {
    "labelWidth": 100,
    "labelHeight": 50,
    "columns": 2,
    "rows": 5,
    "columnGap": 5,
    "rowGap": 5,
    "startX": 5,
    "startY": 10
  },
  "elements": [
    // Elements positioned relative to each label's origin
    {"type": "text", "bounds": {"x": 5, "y": 5, "width": 90, "height": 10},
     "text": {"content": "{{productName}}"}}
  ]
}

Label Grid Properties

Basic Syntax

Use double curly braces {{placeholder}} to avoid conflicts with single braces that may appear in content.

// Template
{"content": "Hello {{name}}!"}

// Request
{"data": {"name": "John"}}

// Result
"Hello John!"

Nested Data Access

// Template
{"content": "Ship to: {{customer.address.city}}"}

// Request
{
  "data": {
    "customer": {
      "address": {
        "city": "New York"
      }
    }
  }
}

// Result
"Ship to: New York"

Array Access

// Template
{"content": "First item: {{items[0].name}}"}

// Request
{
  "data": {
    "items": [
      {"name": "Widget A"},
      {"name": "Widget B"}
    ]
  }
}

// Result
"First item: Widget A"

Special Variables

These variables are available without needing to pass them in data:

{
  "type": "text",
  "page": 1,
  "bounds": {"x": 10, "y": 280, "width": 190, "height": 10},
  "text": {
    "content": "Page {{page}} of {{totalPages}}",
    "hAlign": "center",
    "fontSize": 10,
    "color": {"r": 128, "g": 128, "b": 128}
  }
}