Component properties

Last modified: May 17, 2022Author: Jakub Pomykała

Here you can find all possible properties for Template Editor components.

What is a component?

A component is an object which can be added to a template canvas Template Editor. Every component can be modified using controls in the Inspector or via other integration like REST API, Zapier or

What are the component properties?

Property is a value which defines how the component looks or how it behaves on a template. For example:

  • opacity=0.2 - makes a component nearly visible,
  • opacity=0.0 - makes a component invisible,
  • rotation=45 - rotates a component by 45 degrees (clock-wise),
  • src= - changes image source on Image component,
  • text=Hello World - changes text on Text component,
  • effectName=blur - sets blur on Image component.

Common component properties

These properties can be used with every component.

  • y - y position in pixels
  • x - x position in pixels
  • rotation - rotation in degrees 0 - 360
  • opacity - opacity, eg: 1, 0, 0.5

Image Render

These properties can be applied to the rendered image in general. Use _render value as Component ID to adjust general render options.


  • fileName - custom file name for generated image, allowed characters: a-z, A-Z, 0-9, -, _, ..

Rectangle Component

rectangle component


  • color - rectangle fill color (eg: rgba(255,255,255, 1) or #efefef)
  • borderColor - rectangle stroke color (eg: rgba(255,255,255, 1) or #efefef)
  • radius - rectangle radius of all corners

Circle Component

circle component


  • color - circle fill color (eg: rgba(255,255,255, 1) or #efefef)
  • borderColor - circle stroke color (eg: rgba(255,255,255, 1) or #efefef)
  • borderWidth - circle stroke width (eg: 5)

Text Component

text component


  • text - text value
  • color - text color (eg: rgba(255,255,255, 1) or #efefef)
  • borderColor - text border color (eg: rgba(255,255,255, 1) or #efefef)
  • borderWidth - text border width (eg: 5)
  • textBackgroundColor - text background color

QR Code Component

qr code component


  • value - QR code text, URL or anything else to encode
  • color - QR code color, eg: rgba(255,255,255, 1) or #efefef

Image Component

image component


  • src - image URL or base64,
  • objectFit - cover or contain,
  • effectName - kodachrome,
  • borderColor - border color, eg: rgba(255,255,255, 1) or #efefef,
  • borderWidth - border width in pixels (eg: 5)

Tip: Re-use uploaded images

You can reuse already uploaded images by using media: prefix in src property. For example: media:my-image.png. File names are always taken from original file names from your computer. List of all your uploaded images can be found in My uploads. Currently, there is no option to change image names.

my uploads

Rating Component

rating component


  • value - active rating value

SVG Component

svg component

No additional properties