The modifications object

A modification object can be passed along with a POST request to apply changes to a template before it's rendered. Every key-value pair represents a change to the template. The key serves as a selector for an element and its property, and its value specifies its property value.

For example, if you have an element named "caption" and wish to change its text property to "New caption", you could use the following modification:

1{
2  "caption.text": "New caption"
3}

Omitting the property

In the absence of a property name, the system will assume the most obvious one. For a text element, this property is the text property, and for an image element, it is the source property. Thus, the above modification could be written simply as:

1{
2  "caption": "New caption"
3}

Referring to elements by their IDs

An element can also be referred to by its ID. The ID of an element can be found by using the source editor in the template editor.

1{
2  "ad8bf2a1-9b2a-4a65-82cd-800300dc2919.text": "New caption"
3}

Changing multiple properties

In the following example, we will change the stroke color of a line shape to red, as well as its stroke length to 50%.

1{
2  "my-shape.stroke_color": "#e74c3c",
3  "my-shape.stroke_end": "50%"
4}

Changing keyframe values

By referring to the keyframe's index, you can change the value of a keyframe. For a better understanding of how keyframes are defined, examine the template source in the editor. As seen in this example, we are changing the value of the first keyframe:

1{
2  "my-shape.stroke_end.0.value": "80%"
3}

Replace a value within a text value

Here's an example using a text element with the text: "Hello, {{name}}!". To replace the text enclosed in curly brackets, use the following:

1{
2  "name": "Casper"
3}

In order to ensure that only a specific text element is replaced, prefix it with the element's name:

1{
2  "my-text-element.text.name": "Casper"
3}

Change template settings

Just as any other element property, you can also override template properties. For instance, to set the width and height of the render, you can use the following:

1{
2  "width": 1920,
3  "height": 1080
4}