> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.bannerify.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements

> Elements supported in Bannerify

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](../api-reference/endpoint/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"`.

```ts theme={null}
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:

```ts theme={null}
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](https://iconoir.com/) 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.