The JSON structure of RenderScript

RenderScript is the data format of Creatomate. Its a JSON-based format containing all the information needed to create a video or image. When you submit RenderScript to Creatomate's API, it processes these instructions to generate your desired output; whether that's an MP4 video, PNG, JPEG, or GIF file.

You don't need to learn RenderScript to use Creatomate effectively. The template editor allows you to modify RenderScript files without writing any code. That said, for those interested in deeper automation capabilities, RenderScript provides a robust framework for programmatically creating videos and images.

Top-level properties

Here's what a minimal RenderScript file looks like. This example shows the fundamental properties you need to define:

• The output format: mp4, jpg, png, or gif
• Dimensions: width and height in pixels
• An elements array: empty in this example, creating a blank canvas

Without a specified duration, Creatomate will automatically determine the length based on the content. Since this example has no content, it will default to a 5-second duration.

{
  "output_format": "mp4",
  "width": 1920,
  "height": 1080,
  "elements": []
}

A full list of top-level properties can be found on this page.

Elements

Elements make up the content of the video or image. Each element has its own properties, defining its appearance, position, and place on the timeline.

Every element property has a default value that applies automatically when not explicitly defined in RenderScript. In the example below, we've set up an image to display for 10 seconds, positioned at 25% from the top of the canvas, with a height of 50% of the total canvas height.

Because we haven't specified the horizontal position x and width, the system applies the default values: x defaults to "50%" (centering the image horizontally), and width defaults to "100%" (matching the image width to the canvas width).

{
  "output_format": "mp4",
  "width": 1920,
  "height": 1080,
  "elements": [
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/image1.jpg",
      "duration": 10,
      "y": "25%",
      "height": "50%"
    }
  ]
}

A full list of elements and their properties can be found on this page.

Compositions

A key feature of Creatomate is compositions. A composition is a group of elements that functions as a single element. You can think of it as a nested template with its own timeline and constraints. A common use case for compositions is to sync up elements so that they are linked on the timeline.

{
  "output_format": "mp4",
  "width": 1920,
  "height": 1080,
  "elements": [
    {
      "type": "composition",
      "time": 3,
      "elements": [
        {
          "type": "text",
          "text": "This element is part of a composition that starts at 3 seconds"
        }
      ]
    }
  ]
}

Further reading

Now that you have a high level understanding of RenderScript, the following pages in this section go into more detail.