Skip to main content

​
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 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: 
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 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.