Working with variables

You can define variables at the root of the movie template and use them in your scenes and elements.

Using variables have the following benefits:

• You can keep the template clean and readable without including the data in the template itself.
• You can use the same variable in multiple places in the template. This means that if you are using the same value in different places, you can just reference to a variable and update the value just once.
• If you are integrating with no-code tools (like Zapier or Make) it's easier to update variables instead of updating the template itself.

Variable names

Variable names must start with a letter and can only contain letters, numbers and underscores.

• ✅ myVariable is a valid variable name.
• ✅ my_variable is a valid variable name.
• ❌ 123myVariable is not a valid variable name because it starts with a number.
• ❌ my variable is not a valid variable name because it contains a space.

Simple example

Let's see a simple example of using variables in a dummy template:

{
	"comment": "Variables example",
	"resolution": "full-hd",
    "variables": {
        "message": "Hello world",
        "bgColor": "#4392F1"
    },
	"scenes": [
		{
			"background-color": "{{bgColor}}",
			"elements": [
				{
					"type": "text",
					"style": "005",
					"text": "{{message}}",
					"duration": 10
				}
			]
		}
	]
}

The variables property of the movie template is an object containing the variables you want to use in the template. In this example, we defined 2 variables: message and bgColor.

The message variable will be used in the text element, and the bgColor variable will be used in the background-color property of the scene.

Variables can have values of type string, number.

Multiple replacements

You can also use the same variable in multiple places in the template, like in the following example:

{
  "comment": "Variables example 2",
  "width": 1920,
  "height": 1080,
  "variables": {
    "myImage": "https://assets.json2video.com/assets/images/real-estate/house-seattle/house-seattle-01.jpeg"
  },
  "scenes": [
    {
      "comment": "Scene 1",
      "elements": [
        {
          "type": "component",
          "component": "shape/rectangle",
          "settings": {
            "rectangle1": {
              "left": "-30%",
              "top": "20%",
              "width": "30vw",
              "height": "30vw",
              "animate": {
                "duration": "1500",
                "easing": "easeOutCubic",
                "left": "15%"
              },
              "background-size": "cover",
              "background-image": "url('{{myImage}}')",
              "background-position": "center",
              "border-width": "1vw",
              "border-style": "solid",
              "border-color": "white",
              "border-radius": "0.5vw"
            },
            "rectangle2": {
              "left": "100%",
              "top": "20%",
              "width": "30vw",
              "height": "30vw",
              "animate": {
                "duration": "1500",
                "easing": "easeOutCubic",
                "left": "55%"
              },
              "background-size": "cover",
              "background-image": "url('{{myImage}}')",
              "background-position": "center",
              "border-width": "1vw",
              "border-style": "solid",
              "border-color": "white",
              "border-radius": "0.5vw"
            }
          },
          "comment": "Two images moving horizontally"
        }
      ],
      "duration": 5
    }
  ]
}

Resulting video:

In this example we use the myImage variable in two places in the template. The first one is in the rectangle1 item, and the second one in the rectangle2 item.

In this example we also use the variable as part of the background-image property, as a macro:

{
    "background-image": "url('{{myImage}}')"
}

Nested variables

You can also use variables inside other variables, like in the following example:

{
    "variables": {
        "myMessage": "Hello world!",
        "myFinalMessage": "I say: {{myMessage}}"
    }
}

In this example, the myMessage variable is used in the myFinalMessage variable, and the final value of the myFinalMessage variable is I say: Hello world!.

The variables replacement happens in the order of the variables object. So you can use variables inside other variables only if they are previously defined in the variables object.