How to Create Videos from JSON

In this tutorial, you’ll learn how to create and render MP4 video files from JSON, step by step, using Creatomate’s video generation API.

When your app or workflow needs to produce videos from dynamic data, you need a programmatic approach. One powerful way is to create videos from JSON, which allows you to define entire video files using structured JSON data. You can think of it as HTML for video: just as HTML describes the layout for web pages, JSON describes the composition of a video.

To keep things simple, we'll start with a basic JSON example that covers the fundamentals. From there, you can explore pre-made JSON templates that showcase more advanced use cases, such as automated social media videos, personalized content, and data-driven video generation.

We’ll begin with the simplest possible JSON setup: a single text element displaying "This video is generated from JSON data! 👋" with a basic text animation. To produce the actual MP4, we'll use Creatomate's API, a server that handles the rendering process and converts the JSON into a downloadable video file:

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"
        }
      ]
    }
  ]
}'

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.

Let's 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 16:9 Landscape 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 creating videos from JSON: 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 or tool that supports HTTP requests.

Choose your preferred method, 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! 👋". The API call is a simple HTTP request authenticated with your project’s API key. You can find this key 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 automation with JSON

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

The key is to start simple. Begin with a basic template, explore the JSON structure, make small incremental changes, and gradually work your way toward more complex projects. In no time, you’ll be able to create professional-quality videos entirely through code.

You don’t need to memorize every JSON property. Use the visual editor to design your videos, then export and refine the underlying JSON. This hybrid approach gives you the best of both worlds: an intuitive design experience combined with full programmatic control.

Next, check out our post where we examine real-world use cases and what’s possible beyond the basics.

👉 JSON to Video: Practical Examples