Create images and PDFs in JavaScript

Each method takes a template id and an options object. Every option is optional.

Create an image

createImage renders the template and returns the image bytes.

#templateIdstringrequired

The template id, for example tpl_xxx.

#modificationsModification[]

The values to put into the template’s layers. Each entry names a layer with name. Layers you leave out keep the values from the template. Modifications lists the fields each layer accepts.

#format'png' | 'jpeg' | 'webp'default: png

The image format.

import { writeFile } from "node:fs/promises"

const { result, error } = await bannerify.createImage("tpl_xxx", {
  modifications: [
    { name: "headline", text: "Launch promo" },
    { name: "price", text: "$29" },
  ],
  format: "webp",
})

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

await writeFile("launch-promo.webp", Buffer.from(result))

result is an ArrayBuffer. In a browser or an edge runtime, send it as the body of a Response and set the Content-Type header to the image type.

Create a PDF

createPdf takes the same templateId and modifications. It has no format option.

const { result, error } = await bannerify.createPdf("tpl_invoice", {
  modifications: [
    { name: "customer", text: "Acme Studio" },
    {
      name: "line-items",
      columns: ["Item", "Qty", "Total"],
      rows: [{ Item: "Automate plan", Qty: 1, Total: "$29.00" }],
    },
  ],
})

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

await writeFile("invoice.pdf", Buffer.from(result))

Create a stored image

createStoredImage renders the image, saves it, and returns a URL instead of the bytes. Use it when you want to put the link in an email, a database row, or a no-code tool.

It accepts the options of createImage, plus s3Config.

#s3ConfigS3Config

Save the file to your own S3-compatible bucket. This needs the Scale or Enterprise plan. Without it, Bannerify saves the file on its CDN and returns a link that starts with https://images.bannerify.co/files/.

const { result: url, error } = await bannerify.createStoredImage("tpl_xxx", {
  modifications: [{ name: "headline", text: "Welcome back" }],
})

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

console.log(url)

An S3Config has these fields:

Field	Required	Description
`endPoint`	Yes	The S3 endpoint, without the protocol
`region`	Yes	The bucket region
`bucket`	Yes	The bucket name
`accessKey`	Yes	The access key
`secretKey`	Yes	The secret key
`port`	No	The endpoint port. Defaults to `443`
`useSSL`	No	Defaults to `true`
`pathStyle`	No	Use path-style URLs. Defaults to `false`
`customUrl`	No	A URL template for the returned link. Use `{key}` for the file key

Handle the result

All three methods return { result } or { error }. See Handle errors.