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.
• Override the data via:
  • columns: array of column names displayed in order.
  • rows: array of records whose keys match the columns.
• The variant, the stripe, the row size and the footer stay as you set them in the editor.

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" },
      ],
    },
  ],
})

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 data with charts rendered in the same engine as every other layer, so the output matches the editor exactly.
• Override the points through rows. Each record holds a label and a value:

const { result, error } = await bannerify.createImage("tpl_metrics", {
  modifications: [
    {
      name: "growth-chart",
      rows: [
        { label: "Q1", value: 120 },
        { label: "Q2", value: 180 },
        { label: "Q3", value: 260 },
        { label: "Q4", value: 410 },
      ],
    },
  ],
})

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

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

Set the chart variant, axis labels and legend inside the editor; API overrides update the points and respect your configured options.

Key value

• Print label and value pairs, such as an invoice number, a due date or a total.
• Override the entries through rows. Each record holds a key and a value, and the order in the array is the order on the canvas:

const { result, error } = await bannerify.createImage("tpl_invoice", {
  modifications: [
    {
      name: "invoice-totals",
      rows: [
        { key: "Subtotal", value: "$120.00" },
        { key: "Tax", value: "$12.00" },
        { key: "Total", value: "$132.00" },
      ],
    },
  ],
})

Direction, size and dividers stay as you set them in the editor.

Signature

• Print a signer block with a name, a job title and a date.
• Override the three fields:

const { result, error } = await bannerify.createImage("tpl_contract", {
  modifications: [
    {
      name: "signature",
      text: "An Nguyen",
      title: "Director",
      date: "2026-02-02",
    },
  ],
})

text sets the signer name, because name already identifies the layer.

Alert

• Print a callout, such as a payment deadline or a shipping notice.
• Override the heading and the body:

const { result, error } = await bannerify.createImage("tpl_notice", {
  modifications: [
    {
      name: "notice",
      title: "Payment terms",
      text: "Pay before 31 Jan 2026.",
    },
  ],
})

title sets the heading and text sets the body. The variant, the icon and the border stay as you set them in the editor.

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.