Design a template | Bannerify Docs

A template is a design with named layers. You build it once in the editor. After that, each request sends the template id and new values, and Bannerify returns an image or a PDF with those values in place.

How it fits together

Design the canvas and add the layers. Layer types lists what you can add.
Name every layer that a request changes. Modifications explains how a request uses the names.
Save the template, then send its id and your values to the API. Generate images and Generate PDFs show the requests.

Create a template

Open the Templates page in the dashboard and click New template.
Choose Blank template for an empty canvas, or click a card under Start from a template to copy a gallery template into your project. Browse the gallery shows the rest.

The New template dialog with Blank template, Import from Figma, and gallery templates — The New template dialog.

The editor opens with your new template.

Find your way around

The template editor with the Layers panel on the left, the canvas in the center, and the canvas settings on the right — The editor with a 1080 × 1080 product promo.

Area	What it holds
Top left	The template name opens a list of your templates. The pencil (Rename template) renames this one, and Undo and Redo step through your changes
Top center	Insert, Frame, Text, and Shapes add layers
Top right	Documentation opens these docs, Preview renders the canvas, and Save stores your changes
Left panel	The Layers tab lists every layer, and the Media tab holds your images
Right panel	The Design tab shows the settings of the selected layer. With no layer selected, it shows the canvas settings.

Set the canvas size and background

Click an empty area of the canvas to open the canvas settings.

The canvas settings with the Preset cards, the Size fields, and the Background color — Canvas settings: preset, size, and background.

Pick a size in Preset. Choose a card under Social, Print, Video, or Ads, or use the Square (1080 by 1080 pixels) and Portrait (1080 by 1920) buttons under the cards.
Change the width and height in Size if the preset is close but not exact.
Set Background to a solid color, a gradient, or an image.

The canvas size is the size of the output. An image has that many pixels, and a PDF page has that many points, so a canvas for an A4 PDF is 595 by 842. A request cannot change the canvas.

Add layers

Use Frame and Text in the tool bar, or open Insert or Shapes for the other layer types. Select a layer, then use the Design panel to set where it sits and how it looks. Text layers use Google Fonts. Layer types lists every type and the fields that a request can change.

The Insert menu with Stack, Grid, Image, Icon, QR Code, Barcode, Chart, Table, Key Value, Signature, and Alert — The Insert menu lists the other layer types.

The editor with the headline text layer selected and its Design panel showing position, size, and typography — A selected text layer and its Design panel.

Name your layers

A request finds a layer by its name, so name every layer that a request changes.

Double-click the layer in the Layers list. You can also right-click it and choose Rename.
Type the name and press Enter.

A new layer gets the name of its type, such as Text, and the second layer of a type gets a number, such as Text 1. Pick names that read well in code, such as headline or price. The match is exact, so Price and price are two names, and two layers with the same name get the same value. Modifications has the rules.

Add images

Open the Media tab.

The Media tab of the editor with Upload, Browse library, and a grid of images — The Media tab holds the images of your project.

Click Upload to add image files from your computer. Each file becomes an image layer on the canvas, and a file can be up to 5 MB.
Click Browse library to search stock images. Select one and click Add to Template.

Use PNG, JPEG, WebP, or SVG files, because those are the types that Bannerify can render. An image layer can also point to an address. Image shows the options.

Preview your changes

Click Preview in the top bar, or press Ctrl+P (Cmd+P on a Mac). The Preview template panel renders the canvas as it is now, including changes that you have not saved. It uses the same renderer as the API, it does not count toward your quota, and it always shows a PNG. A badge next to the title shows whether the image is Rendering, Ready, Unsynced, or Render failed.

The panel lists the layers of the template. Select a layer to try a value on it.

The Preview template panel with the layer list on the left and the rendered image on the right — Select a layer to try a value, then compare the render.

Layer	What you can try
Text	Text content and Text color
Image	Image URL
QR code	QR code content
Barcode	Barcode value
Any layer	Show or hide it

Other layer types show Visibility only, so test tables, charts, and key value layers in a request. The values that you enter in the panel are for testing and do not change the template. Reset and Reset all bring the original values back.

The panel warns about two naming problems:

Layer name required means a layer has no name, so a request cannot change it.
Shared layer name means several layers share a name, so a request applies the same value to each of them.

Download saves the preview image, and Copy copies it.

Save the template

Save is off until you change something. Click it to store the template. API requests use the saved version, so save before you test a change through the API. If you leave the editor with unsaved changes, a dialog asks you to confirm.

Copy the template id

On the Templates page, open the menu on a template card.

Copy Template ID copies the id that a request sends as templateId.
View generations opens the Generations page for this template, with the time, the format, the size, and the modifications of each generation.

Next steps

Layer types describes each layer and its fields.
Recipes for common jobs builds six templates and the requests for them.
Generate images and Generate PDFs cover the API.