> ## 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.

# Template Editor

> Create and edit templates for your images with ease

## Overview

The Template Editor is a powerful tool in Bannerify that enables you to design and customize templates for your images. With this feature, you can add text, images, and other elements to your image, and even modify the size, color, and font of the text.

Think of it as a mini Figma or Photoshop for your images. You can create and edit templates in just a few clicks, and then use our API to programmatically generate the final image.

## Build data-rich documents

Bannerify's editor supports the same data-bound elements you render through the API, making it ideal for automating reports, invoices, labels, and other PDF-heavy workflows.

* Drop **table** and **chart** layers alongside text or imagery. Configure column order, row spacing, and themes so metrics stay legible when exported to PNG, JPG, WebP, or PDF.
* Give every layer a descriptive `name`. The REST API and JavaScript SDK address layers via the `modifications` array, so naming keeps automation predictable.
* Preview live data without leaving the canvas. Use the guidance in [Preview and QA the template](/docs/onboarding#2-preview-and-qa-the-template) or sample modifications to confirm bindings render correctly before automation takes over.

### Configure table data

1. Add a **Table** element and set the default columns that match your dataset.
2. Adjust width and height modes to control wrapping (`standard`) or automatic sizing (`adaptive`).
3. Pick a theme such as `DEFAULT`, `SIMPLIFY`, or `ARCO` to align with your brand guidelines.
4. Save the template—your configuration becomes the baseline for every automated render.

When you trigger a render, pass structured data to override the table contents:

```ts theme={null}
import { Bannerify } from "bannerify-js"

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

const { result, error } = await bannerify.createPdf("tpl_ops_report", {
  modifications: [
    {
      name: "report-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",
    },
    { name: "report-title", text: "Weekly fulfillment" },
  ],
})

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

// `result` is an ArrayBuffer you can persist to storage or attach to downstream workflows
```

### Keep stakeholders aligned

* Share hosted forms and preview links so finance, logistics, or operations teams can approve updates before automations run.
* Pair editor changes with [automation blueprints](/docs/essentials/automation-blueprints#operations-reporting-blueprint) to move from design to production renders without rework.
* Review activity logs after each render to audit who updated the template and when assets were generated.