Media & Code

Media elements embed visual and technical content into your document: images, charts, QR codes, code blocks, and LaTeX math equations.

Image

Embeds an image from a URL or uploaded image path.

{
  "type": "image",
  "src": "https://example.com/photo.jpg",
  "width": 400,
  "height": 300,
  "align": "center",
  "caption": "Company headquarters",
  "anchor": "fig-hq"
}

Properties

Property	Type	Required	Default	Description
`type`	string	Yes	—	Must be `"image"`
`id`	string	No	—	Unique identifier. Max: 100 chars.
`src`	string	Yes	—	Image URL or uploaded image path (`/image/...`). Max: 500 chars.
`width`	number	No	—	Width in px (10–2000).
`height`	number	No	—	Height in px (10–2000).
`align`	string	No	—	Alignment: `"left"`, `"center"`, `"right"`
`caption`	string	No	—	Caption for figure numbering (e.g., `"Sales chart 2024"`). Max: 500 chars.
`anchor`	string	No	—	Anchor ID for internal references. Pattern: `^[a-zA-Z][a-zA-Z0-9_-]*$`. Max: 100 chars.
`spacing`	object	No	—	Spacing override with `before` and `after` in pt (0–100).

Images with a caption are automatically numbered (e.g., “Figure 1: Company headquarters”). The numbering prefix and style are controlled by defaults.styles.figureCaption. See Defaults — Figure caption style.

Cross-referencing images

Images with a caption and anchor can be referenced in text using internal references:

{
  "sections": [{
    "type": "flow",
    "content": [
      { "type": "image", "src": "https://example.com/diagram.png", "caption": "System architecture", "anchor": "fig-arch" },
      { "type": "text", "text": "As shown in [](#fig-arch), the system consists of three layers." },
      { "type": "text", "text": "Refer to [Figure {num}](#fig-arch) for the full diagram." },
      { "type": "text", "text": "The [architecture diagram](#fig-arch) illustrates the design." }
    ]
  }]
}

The three reference styles: [](#anchor) (auto — shows caption with number), [Figure {num}](#anchor) (template — replaces {num}), and [custom text](#anchor) (custom — shows your text as a link).

Chart

Renders a Chart.js chart as an image. Supports line, bar, pie, doughnut, radar, polar area, scatter, and bubble charts.

{
  "type": "chart",
  "width": 600,
  "height": 400,
  "caption": "Quarterly revenue",
  "config": {
    "type": "bar",
    "data": {
      "labels": ["Q1", "Q2", "Q3", "Q4"],
      "datasets": [
        { "label": "2024", "data": [100, 120, 115, 140] },
        { "label": "2023", "data": [80, 95, 90, 110] }
      ]
    },
    "options": {}
  }
}

Chart element properties

Property	Type	Required	Default	Description
`type`	string	Yes	—	Must be `"chart"`
`id`	string	No	—	Unique identifier. Max: 100 chars.
`config`	object	Yes	—	Chart.js configuration. See Chart config.
`width`	number	No	—	Chart width in px (10–2000).
`height`	number	No	—	Chart height in px (10–2000).
`align`	string	No	—	Alignment: `"left"`, `"center"`, `"right"`
`caption`	string	No	—	Caption for figure numbering. Max: 500 chars.
`anchor`	string	No	—	Anchor ID for internal references. Max: 100 chars.
`spacing`	object	No	—	Spacing override with `before` and `after` in pt (0–100).

Chart config

The config object follows the Chart.js configuration format:

Property	Type	Required	Description
`type`	string	Yes	Chart type: `"line"`, `"bar"`, `"pie"`, `"doughnut"`, `"radar"`, `"polarArea"`, `"scatter"`, `"bubble"`
`width`	number	No	Render width in px (50–4000).
`height`	number	No	Render height in px (50–4000).
`backgroundColor`	string	No	Chart background color.
`data`	object	Yes	Chart data with `labels` and `datasets`.
`options`	object	No	Chart.js options (axes, legend, tooltips, etc.).

Chart dataset

Property	Type	Required	Description
`label`	string	No	Dataset label for the legend.
`data`	array	Yes	Data points. Numbers, strings, or `{x, y, r}` objects (for scatter/bubble).

Variable substitution in charts

Chart data.labels and data.datasets[].data arrays support {{varName}} placeholders. At render time, variable references are resolved:

Number variables are substituted as numeric values directly (e.g., {{revenue}} → 1250.00)
Text variables containing a numeric string are parsed to numbers (e.g., "1500" → 1500)
For {x, y} point objects, both x and y fields support variable substitution

{
  "variables": {
    "q1Revenue": { "type": "number", "value": 150000 },
    "q2Revenue": { "type": "number", "value": 180000 }
  },
  "sections": [{
    "type": "flow",
    "content": [{
      "type": "chart",
      "config": {
        "type": "bar",
        "data": {
          "labels": ["Q1", "Q2"],
          "datasets": [{ "label": "Revenue", "data": ["{{q1Revenue}}", "{{q2Revenue}}"] }]
        }
      }
    }]
  }]
}

Default chart colors are configured via defaults.chart.colors and defaults.chart.borderColors. See Defaults — Chart defaults.

QR Code

Generates a QR code image. Supports URL, WiFi, and vCard data types.

URL QR code

{
  "type": "qrcode",
  "qrType": "url",
  "data": { "url": "https://example.com" },
  "size": 200,
  "align": "center"
}

WiFi QR code

{
  "type": "qrcode",
  "qrType": "wifi",
  "data": {
    "ssid": "MyNetwork",
    "password": "secret123",
    "encryption": "WPA",
    "hidden": false
  }
}

vCard QR code

{
  "type": "qrcode",
  "qrType": "vcard",
  "data": {
    "firstName": "John",
    "lastName": "Smith",
    "organization": "Acme Inc",
    "phone": "+1234567890",
    "email": "john@example.com",
    "url": "https://example.com"
  }
}

QR code base properties

Property	Type	Required	Default	Description
`type`	string	Yes	—	Must be `"qrcode"`
`id`	string	No	—	Unique identifier. Max: 100 chars.
`qrType`	string	Yes	—	QR data type: `"url"`, `"wifi"`, or `"vcard"`
`data`	object	Yes	—	QR code data (varies by `qrType`).
`size`	number	No	—	QR code size in px (50–1000).
`errorCorrection`	string	No	—	Error correction level: `"L"` (7%), `"M"` (15%), `"Q"` (25%), `"H"` (30%).
`align`	string	No	—	Alignment: `"left"`, `"center"`, `"right"`
`spacing`	object	No	—	Spacing override with `before` and `after` in pt (0–100).

QR code data schemas

URL data (qrType: "url")

Property	Type	Required	Description
`url`	string	Yes	URL to encode. Max: 2000 chars.

WiFi data (qrType: "wifi")

Property	Type	Required	Description
`ssid`	string	Yes	Network name. Max: 32 chars.
`password`	string	No	Network password. Max: 63 chars.
`encryption`	string	No	Encryption type: `"WPA"`, `"WEP"`, or `"nopass"`
`hidden`	boolean	No	Hidden network flag.

vCard data (qrType: "vcard")

Property	Type	Required	Description
`firstName`	string	No	First name. Max: 100 chars.
`lastName`	string	No	Last name. Max: 100 chars.
`organization`	string	No	Organization. Max: 100 chars.
`phone`	string	No	Phone number. Max: 50 chars.
`email`	string	No	Email address. Max: 100 chars.
`url`	string	No	Website URL. Max: 200 chars.
`address`	string	No	Address. Max: 200 chars.
`note`	string	No	Note. Max: 500 chars.

Code block

Renders a syntax-highlighted code block.

{
  "type": "code",
  "language": "javascript",
  "code": "function hello() {\n  console.log('Hello, world!');\n}"
}

Properties

Property	Type	Required	Default	Description
`type`	string	Yes	—	Must be `"code"`
`id`	string	No	—	Unique identifier. Max: 100 chars.
`code`	string	Yes	—	Source code content. 1–20000 chars.
`language`	string	No	—	Programming language for syntax highlighting (e.g., `"javascript"`, `"python"`, `"sql"`), or a diagram language (e.g., `"mermaid"`, `"plantuml"`). Max: 50 chars.
`renderAsImage`	boolean	No	—	Render the code block as an image. For diagram languages, defaults to `true`. Set to `false` to show diagram source as code.
`backgroundColor`	string	No	—	Background color in hex (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`).
`width`	number	No	—	Width in px (10–2000). Only applies when `renderAsImage` is true.
`align`	string	No	—	Alignment: `"left"`, `"center"`, `"right"`
`caption`	string	No	—	Caption for auto-numbering. Code blocks appear in the List of Code Listings; diagram blocks appear in the List of Figures. Max: 500 chars.
`anchor`	string	No	—	Anchor ID for internal references. Pattern: `^[a-zA-Z][a-zA-Z0-9_-]*$`. Max: 100 chars.
`spacing`	object	No	—	Spacing override with `before` and `after` in pt (0–100).

Captions and anchors

Code blocks support caption and anchor for auto-numbering and cross-references:

{
  "type": "code",
  "language": "typescript",
  "code": "interface Config {\n  apiUrl: string;\n  timeout: number;\n}",
  "caption": "Configuration interface",
  "anchor": "code-config"
}

Code blocks with a caption are automatically numbered (e.g., “Listing 1: Configuration interface”) and appear in the List of Code Listings. The numbering prefix and style are controlled by defaults.styles.codeCaption. See Defaults — Code caption style. Default code block styling is configured via defaults.styles.code. See Defaults — Code style.

Diagrams

Code blocks with a supported diagram language are automatically rendered as images in the exported document.

Mermaid example

{
  "type": "code",
  "language": "mermaid",
  "code": "graph TD\n    A[Start] --> B{Decision?}\n    B -->|Yes| C[Action 1]\n    B -->|No| D[Action 2]\n    C --> E[End]\n    D --> E",
  "caption": "System flowchart",
  "anchor": "fig-flowchart",
  "align": "center"
}

When the language is a supported diagram type, the code content is rendered as a PNG image. Diagrams with a caption are auto-numbered as figures (e.g., “Figure 1: System flowchart”) and appear in the List of Figures.

Supported diagram languages

Language	`language` value	Description
Mermaid	`"mermaid"`	Flowcharts, sequence diagrams, class diagrams, Gantt charts, and more
PlantUML	`"plantuml"`	UML diagrams (class, sequence, activity, use case, etc.)
GraphViz	`"graphviz"` or `"dot"`	Graph and network visualizations
Structurizr	`"structurizr"`	C4 architecture diagrams
BlockDiag	`"blockdiag"`	Simple block diagrams
SeqDiag	`"seqdiag"`	Sequence diagrams
ActDiag	`"actdiag"`	Activity diagrams with swimlanes
NwDiag	`"nwdiag"`	Network topology diagrams
PacketDiag	`"packetdiag"`	Packet/protocol header diagrams
C4 with PlantUML	`"c4plantuml"`	C4 architecture model using PlantUML syntax
DBML	`"dbml"`	Database markup language for ER diagrams
Ditaa	`"ditaa"`	ASCII art to diagram conversion
ERD	`"erd"`	Entity-relationship diagrams
TikZ	`"tikz"`	LaTeX-based technical drawings
UMlet	`"umlet"`	UML diagrams
Vega	`"vega"`	Declarative data visualizations
WireViz	`"wireviz"`	Wiring harness and cable documentation

Rendering diagram source as code (renderAsImage=false)

Set renderAsImage to false to display the diagram source code as a regular code block instead of rendering it as an image:

{
  "type": "code",
  "language": "mermaid",
  "code": "graph TD\n    A --> B\n    B --> C",
  "renderAsImage": false,
  "caption": "Mermaid source code",
  "anchor": "code-mermaid-src"
}

When renderAsImage is false on a diagram code block, the block is treated as a regular code listing. If it has a caption, it appears in the List of Code Listings instead of the List of Figures.

The global default for renderAsImage can be set via defaults.styles.code.renderAsImage (default: true). The element-level property always overrides the global default.

Math (LaTeX)

Renders a block-level LaTeX math equation as a standalone element.

Math is only supported as a block-level element. Inline math within paragraphs is not currently supported.

{
  "type": "math",
  "latex": "E = mc^2",
  "align": "center"
}

Block-level equation:

{
  "type": "math",
  "latex": "\\int_{0}^{\\infty} e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}",
  "align": "center"
}

Properties

Property	Type	Required	Default	Description
`type`	string	Yes	—	Must be `"math"`
`id`	string	No	—	Unique identifier. Max: 100 chars.
`latex`	string	Yes	—	LaTeX math expression. 1–5000 chars.
`align`	string	No	—	Alignment: `"left"`, `"center"`, `"right"`
`renderAsImage`	boolean	No	—	Render math as image for better cross-format compatibility.
`spacing`	object	No	—	Spacing override with `before` and `after` in pt (0–100).

Default math styling is configured via defaults.styles.math. See Defaults — Math style.

Complete example

{
  "document": { "type": "pdf", "size": "A4" },
  "defaults": {
    "chart": { "colors": ["#4BC0C0", "#FF6384", "#36A2EB"] },
    "styles": {
      "figureCaption": { "fontSize": 9, "fontStyle": "italic", "prefix": "Fig." }
    }
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        { "type": "h1", "text": "Technical Report" },
        {
          "type": "image",
          "src": "https://example.com/architecture.png",
          "width": 500,
          "align": "center",
          "caption": "System architecture overview",
          "anchor": "fig-arch"
        },
        { "type": "text", "text": "The architecture shown in [Fig. 1](#fig-arch) consists of three layers." },
        {
          "type": "chart",
          "caption": "Performance benchmarks",
          "config": {
            "type": "line",
            "data": {
              "labels": ["Jan", "Feb", "Mar", "Apr"],
              "datasets": [{ "label": "Requests/s", "data": [1200, 1500, 1800, 2100] }]
            }
          },
          "width": 500,
          "height": 300
        },
        { "type": "h2", "text": "Implementation" },
        {
          "type": "code",
          "language": "typescript",
          "code": "async function render(doc: Document): Promise<Buffer> {\n  const result = await engine.process(doc);\n  return result.toBuffer();\n}"
        },
        { "type": "h2", "text": "Mathematical Model" },
        { "type": "math", "latex": "f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!}(x-a)^n", "align": "center" },
        { "type": "h2", "text": "Contact" },
        {
          "type": "qrcode",
          "qrType": "vcard",
          "data": { "firstName": "John", "lastName": "Smith", "email": "john@example.com" },
          "size": 150,
          "align": "center"
        }
      ]
    }
  ]
}

Overview

Document JSON Syntax

Tools Guides

Images

Rendering

Bulk Rendering

Projects & Documents

Tools File Management

Tools PDF Actions

Tools Document Actions

Lens (AI)

Tools Jobs

Image

Properties

Cross-referencing images

Chart

Chart element properties

Chart config

Chart dataset

Variable substitution in charts

QR Code

URL QR code

WiFi QR code

vCard QR code

QR code base properties

Code block

Properties

Captions and anchors

Diagrams

Mermaid example

Supported diagram languages

Rendering diagram source as code (renderAsImage=false)

Math (LaTeX)

Properties

Complete example

​Image

​Properties

​Cross-referencing images

​Chart

​Chart element properties

​Chart config

​Chart dataset

​Variable substitution in charts

​QR Code

​URL QR code

​WiFi QR code

​vCard QR code

​QR code base properties

​Code block

​Properties

​Captions and anchors

​Diagrams

​Mermaid example

​Supported diagram languages

​Rendering diagram source as code (renderAsImage=false)

​Math (LaTeX)

​Properties

​Complete example

Image

Properties

Cross-referencing images

Chart

Chart element properties

Chart config

Chart dataset

Variable substitution in charts

QR Code

URL QR code

WiFi QR code

vCard QR code

QR code base properties

Code block

Properties

Captions and anchors

Diagrams

Mermaid example

Supported diagram languages

Rendering diagram source as code (renderAsImage=false)

Math (LaTeX)

Properties

Complete example