Element reference
Every element on a page has a type field. Below is every type, every property, and a minimal example.
Every element accepts these common positioning fields:
| Field | Type | Default |
|---|
position | {x, y} in mm (or doc unit) | flow with previous |
width | number | content area width |
height | number | auto-size |
style | StyleRef | — |
text
A paragraph or heading with single styling.
| Field | Type | Required |
|---|
type | "text" | yes |
content | string | yes |
heading | true or 1..6 | no — turns the element into <h1> … <h6> |
align | "left" · "center" · "right" · "justify" | no |
tocEntry | string | no — text used in TOC instead of content |
tocLevel | 1..6 | no — TOC nesting depth |
link | string or {type, target} | no |
{ "type": "text", "content": "Section 1", "heading": 2, "style": "h2" }
richtext
Inline-formatted text. A list of runs, each with its own styling.
| Field | Type |
|---|
type | "richtext" |
runs | array of RichTextRun |
Each run accepts: text, bold, italic, underline, strikethrough, color, fontSize, fontFamily, style, link.
{ "type": "richtext", "runs": [
{ "text": "This is " },
{ "text": "bold", "bold": true },
{ "text": " and " },
{ "text": "colored", "color": "#dc2626" },
{ "text": " and " },
{ "text": "linked", "link": "https://example.com" }
] }
image
| Field | Type |
|---|
type | "image" |
resource | string — key into resources.images |
src | string — URL, file path, or data: URI |
alt | string |
fit | "contain" · "cover" · "fill" · "none" |
link | same as text |
{ "type": "image", "resource": "hero", "width": 120, "height": 80, "fit": "cover" }
{ "type": "image", "src": "https://cdn.example.com/logo.png" }
table
| Field | Type |
|---|
type | "table" |
headers | array of strings |
columns | array of {header, width, align} |
rows | 2D array — each cell is a string or {content, colspan, rowspan, style} |
borders | boolean or {outer, inner, color, width} |
alternatingRowColor | color string |
alternateRowStyle | StyleRef |
headerStyle / rowStyle | StyleRef |
{ "type": "table",
"headers": ["Quarter", "Revenue", "YoY"],
"borders": { "outer": true, "inner": true, "color": "#e2e8f0" },
"alternatingRowColor": "#f8fafc",
"columns": [{ "align": "left" }, { "align": "right" }, { "align": "right" }],
"rows": [
["Q1", "$2.3M", "+12%"],
["Q2", "$2.7M", "+15%"]
] }
list
| Field | Type |
|---|
type | "list" |
listType | "ordered" · "unordered" (default "unordered") |
items | array of {content, listType?, children?} |
Items can have nested children (recursive). A child item with its own listType overrides the parent's type for that subtree.
{ "type": "list", "listType": "unordered", "items": [
{ "content": "First" },
{ "content": "Second", "children": [
{ "content": "Nested A" },
{ "content": "Nested B" }
] },
{ "content": "Third" }
] }
shape
| Field | Type |
|---|
type | "shape" |
shape | "rect" · "circle" · "ellipse" · "line" · "path" |
fill | color string |
stroke | color string or {color, width} |
strokeWidth | number |
borderRadius | number (rect only) |
path | SVG d string (path only) |
{ "type": "shape", "shape": "rect", "fill": "#3b82f6",
"width": 60, "height": 40, "borderRadius": 8 }
collapsible
| Field | Type |
|---|
type | "collapsible" |
title | string |
elements | array of any element |
expanded | boolean — initial state (default false) |
{ "type": "collapsible", "title": "Click to expand",
"expanded": false,
"elements": [
{ "type": "text", "content": "Hidden content here" }
] }
toc
Auto-generated from headings on every page. Click an entry to navigate to that page.
| Field | Type |
|---|
type | "toc" |
depth | integer 1-6 — max heading level to include (default 6) |
{ "type": "toc", "depth": 3, "width": 166 }
Style properties
Both inline element style and named styles entries accept these CSS-like properties:
| Property | Type / values |
|---|
fontFamily | string |
fontSize | number (points) |
fontWeight | "normal" · "bold" · "100"…"900" |
fontStyle | "normal" · "italic" |
color | color string (hex) |
backgroundColor | color string |
textAlign | "left" · "center" · "right" · "justify" |
textDecoration | "none" · "underline" · "line-through" · "strikethrough" |
lineHeight | number |
letterSpacing | number (px) or string |
padding / margin | number, string, or {top, right, bottom, left} |
marginTop / marginBottom | number |
border | string (CSS-like) |
borderRadius | number or string |
opacity | number 0..1 |