JSON-to-video: How to Create Videos from JSON

In this tutorial, you'll learn how to generate MP4 video files from JSON using a cloud-based API for rendering.

Sometimes you need to create videos programmatically – like when building apps that generate videos from dynamic data. One powerful approach is JSON-to-video, which allows you to build entire video files using JSON code. You can think of it like HTML for video: just as HTML describes the layout for web pages, JSON describes the composition of videos.

To keep it simple, we'll begin with a simple JSON example to cover the basics, but be sure to explore the pre-made JSON templates that demonstrate advanced examples, like automated social media videos, personalized content, and AI-generated videos.

Let's start with the simplest possible JSON example: a single text element reading "This video is generated from JSON data! 👋" with a basic text animation. To generate the actual MP4, we'll use an API – a server that handles the heavy rendering process and converts the JSON into the actual video file, which we can then download. The result is shown in the video below:

curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "text",
      "track": 1,
      "width": "75%",
      "height": "25%",
      "x_alignment": "50%",
      "y_alignment": "50%",
      "text": "This video is generated from JSON data! 👋",
      "font_family": "Noto Sans",
      "fill_color": "#ffffff",
      "animations": [
        {
          "time": 0,
          "duration": 1,
          "easing": "quadratic-out",
          "type": "text-slide",
          "scope": "element",
          "split": "line",
          "distance": "200%",
          "direction": "right",
          "background_effect": "disabled"
        }
      ]
    }
  ]
}'

What is JSON-to-video

JSON-to-video is a way to create videos using code instead of traditional video editing software. You write instructions in JSON (JavaScript Object Notation), a simple text format, that tells the software exactly what your video should look like.

With JSON, you can describe everything about your video: the text, images, animations, and timing. This makes it easy to create many different videos automatically, which is perfect for apps that need to generate personalized or dynamic content.

When you send your JSON instructions to Creatomate's API, our servers turn your code into a finished MP4 video file. We call this JSON format RenderScript, and it gives you everything you need to create professional videos programmatically.

How to turn JSON into an MP4 file

In Creatomate, JSON forms the foundation for creating videos. You can use it in two ways:

• Via the API → Send JSON directly in your request to render videos.
• Via the editor → Design visually in the editor, then export or tweak the underlying JSON.

While you can hand-code everything by following the documentation, the easiest way to start is with the editor. Every design you create in the editor is backed by JSON. This way, you can see exactly how your visual changes translate into code.

In this tutorial, we'll follow that approach: start with a simple design, expand it step by step, and finally render the video. Rendering works in any programming language – Node.js, PHP, Python, or any language you're familiar with. All you need to do is send the JSON in an API request, and Creatomate returns the generated MP4 file.

Ready to get started?

1. Start with a blank template

Log in to your Creatomate account, or sign up for free if you don't have one yet

Go to the Templates page and click New. You can choose any template from the gallery, but for this tutorial, we'll start from scratch with an empty template. Click Create Template to open it in the editor:

You'll see a blank canvas ready for customization. Behind the scenes, this template contains only the minimal JSON structure. This gives us a clean starting point from which to build.

Starting blank is helpful because pre-made templates often include complex JSON with many elements, which can be overwhelming to start with. By starting with an empty template, you can understand each component as we add it, step by step.

2. Access the JSON source code

In this step, we'll explore the JSON code behind our blank template.

Open the Source Editor by clicking the {...} icon or pressing F12:

A code panel will appear showing the JSON structure of your template:

{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": []
}

Let's quickly go over the key top-level properties:

• "output_format": The file type. Options include mp4, gif, jpg, or png.
• "width" & "height": The dimensions of the final output in pixels.
• "elements": An array containing all visual components, such as text, images, shapes, and more.

3. Modify the JSON code

Notice that the “elements” array is empty – which is why the canvas is still blank. This array is where all the visual components of your video will be defined. To bring the template to life, let's add a text element:

{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "text",
      "track": 1,
      "width": "75%",
      "height": "25%",
      "x_alignment": "50%",
      "y_alignment": "50%",
      "text": "Hello world!",
      "font_family": "Noto Sans",
      "fill_color": "#ffffff"
    }
  ]
}

You'll see the canvas updates automatically, giving you a live preview of the video.

4. Make changes via the editor

In the previous step, we added a text element directly to the JSON, which updated the template in the editor. Now we'll see that it also works the other way around. We'll customize the template visually by adding an animation to our text element and watch how the changes sync automatically with the JSON code.

In the left-hand panel in the editor, select the Text element. On the right-hand side, open the Animations panel. Add an Enter animation – for example, slide right line by line.

If you have the source editor open, you'll see that the animation is automatically added to the text element in the JSON.

This demonstrates the versatility of JSON-to-video: you can work visually or with code, and both approaches produce the same result. The JSON is always the source of truth, describing exactly how your video will render.

5. Render your video via API

Once you're happy with your JSON template, you can generate videos programmatically using the Creatomate API. This works with any programming language that can make HTTP requests.

Choose your preferred programming language, then copy the code:

curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "text",
      "track": 1,
      "width": "75%",
      "height": "25%",
      "x_alignment": "50%",
      "y_alignment": "50%",
      "text": "This video is generated from JSON data! 👋",
      "font_family": "Noto Sans",
      "fill_color": "#ffffff",
      "animations": [
        {
          "time": 0,
          "duration": 1,
          "easing": "quadratic-out",
          "type": "text-slide",
          "scope": "element",
          "split": "line",
          "distance": "200%",
          "direction": "right",
          "background_effect": "disabled"
        }
      ]
    }
  ]
}'

Here, we'll use the JSON data from the source editor and change the text to "This video is generated from JSON data! 👋". You can see that the API call is a simple REST request using the API key of your project. You can find it under project settings in your Creatomate dashboard.

Next, run the script. You will get an API response like this:

{
  "id": "df06f68e-3bb9-44cb-8ff1-1aa335db25f0",
  "status": "planned",
  "url": "https://f002.backblazeb2.com…/file/creatomate-c8xg3hsxdu/df06f68e-3bb9-44cb-8ff1-1aa335db25f0.mp4",
  "output_format": "mp4"
}

The "status" is initially set to "planned", which means Creatomate has accepted your request and will start processing shortly.

There are two ways to wait for your video to finish. One option is to write a small function that checks if the "status" has changed to "succeeded". This requires making separate GET requests to retrieve the video's status.

The second, and recommended, approach is to use a webhook. With this method, Creatomate can notify your application automatically as soon as the video is ready. This avoids repeatedly checking the API.

For now, just wait a minute and visit the URL you received in the API response. If you see a “Not Found” message, the video isn't ready yet. Wait a little longer and try again.

When it's done, the URL will return your video:

And that's it! You can now customize the content for each video or generate new JSON for every render, giving you complete control over the video creation process.

What's next for video creation with JSON

JSON-to-video opens up powerful possibilities for automated video creation. Once you understand the JSON format, you can create personalized videos at scale, integrate video generation into your applications, automate repetitive video creation tasks, build sophisticated video workflows, and more.

The key is to start simple: begin with a basic template, observe the JSON structure, make small incremental changes, and gradually move on to more complex projects. In no time, you'll be able to create professional-quality videos entirely through code.

Remember: you don't need to memorize every JSON property. Use the visual editor to design your videos, then export and adjust the underlying JSON. This hybrid approach gives you the best of both worlds: intuitive design tools plus programmatic control.

Next, let's take a look at a more practical JSON composition:

👉 Create a video by RenderScript