Elements

Bannerify templates combine visual design with data-bound automation. Every element you drop on the canvas can be targeted through the API or SDK using the modifications array defined in the Create Image endpoint.

💡 Layer names matter. Set a descriptive name for each layer in the editor—API calls reference the layer via the name property.

Core elements

Text

• Typography inherits all styling you configure in the editor (fonts, weight, alignment, line height).
• Override copy or color at render time with:
  • text: replace the layer content.
  • color: update the text fill color.
  • visible: toggle the layer on or off for a specific render.

Image

• Supports uploaded assets, signed URLs, or remote images. Bannerify fetches and caches external sources at render time.
• Override imagery with:
  • src: supply a new image URL.
  • visible: hide/show variant artwork without duplicating templates.

Frame

• Frames act as layout containers. Group related layers, control padding, and apply shared transforms.
• Use frames to organize complex automations (e.g., entire product cards or invoice headers) and to simplify show/hide logic through the visible flag.

Data-bound elements

Table

• Render tabular data inside images or PDFs without stitching screenshots.
• Tables respect column definitions, per-column widths, and preset themes.
• Override data and presentation via:
  • columns: array of column keys displayed in order.
  • rows: array of records whose keys match the columns.
  • widthMode: "standard" or "adaptive" column sizing.
  • heightMode: "standard" or "adaptive" row sizing.
  • theme: one of "NONE" | "DEFAULT" | "BRIGHT" | "SIMPLIFY" | "ARCO".

import { Bannerify } from "bannerify-js"

const bannerify = new Bannerify(process.env.BANNERIFY_API_KEY!)

const { result, error } = await bannerify.createImage("tpl_catalog", {
  modifications: [
    {
      name: "sales-table",
      columns: ["Region", "Orders", "Revenue"],
      rows: [
        { Region: "North America", Orders: 120, Revenue: "$45k" },
        { Region: "EMEA", Orders: 96, Revenue: "$38k" },
        { Region: "APAC", Orders: 142, Revenue: "$51k" },
      ],
      widthMode: "adaptive",
      theme: "SIMPLIFY",
    },
  ],
})

if (error) throw new Error(error.message)

// `result` is an ArrayBuffer containing the rendered asset
// Persist result (ArrayBuffer) to storage or attach to downstream requests

Chart

• Visualize datasets with charts generated server-side. Bannerify renders Chart.js specs and caches results for faster subsequent runs.
• Override chart content by passing the Chart.js-compatible object through the chart property:

const { result, error } = await bannerify.createImage("tpl_metrics", {
  modifications: [
    {
      name: "growth-chart",
      chart: {
        labels: ["Q1", "Q2", "Q3", "Q4"],
        datasets: [
          { label: "Signups", data: [120, 180, 260, 410] },
          { label: "Upgrades", data: [40, 65, 90, 150] },
        ],
      },
    },
  ],
})

if (error) throw new Error(error.message)

// Use Buffer.from(result) (Node) or new Blob([result]) (browser) to deliver the asset

Set the default chart type and styling inside the editor; API overrides update the dataset while respecting your configured options.

Star rating

• Display review or quality scores. Bannerify renders one star per integer value supplied.
• Override with the numeric star field (e.g., star: 5). Combine with visible to show ratings only for qualifying products.

Automation-friendly codes

QR Code

• Encode URLs, coupon codes, or app deep links. Override with the qrcode field.

Barcode

• Generate Code128 barcodes for inventory, tickets, and logistics. Override with the barcode field.

Icon

• Drop vector icons sourced from the Iconoir set. Icons inherit tint, size, and rotation from the editor.
• Use them for visual cues alongside text and metrics; toggle visibility per render when needed.

Layer visibility & fallbacks

• visible applies to every element type and is useful for AB tests or conditional disclosures.
• When modifications omit a property, Bannerify falls back to the template defaults configured in the editor.