Text elements are based on design templates that accelerate results and deliver professional-looking videos with no effort. We have dozens of templates you can use, and we are creating new ones every month.

There are simple templates for displaying plain text, others that include text animations, others with complementary text boxes, and others that can be used as chyrons or lower-thirds. Brow se the template catalog in our template library.

Simple text

This first example shows a simple text centred on the video using all default settings of the Text element and the default basic/001 template. The background of the basic/001 template is transparent, so make sure not to use the same color for the text and the background.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "text",
                    "items": [
                        {
                            "text": "Hello world"
                        }
                    ],
                    "y": 510,
                    "duration": 10
                }
            ]
        }
    ]
}

The output of the JSON above is:

The Text element defaults are:

The default settings for basic/001 template are:

So the text element dimensions are 1920x1080 and it's positioned at x=0, y=510. The text is centered within the text element, so it's centered within the movie.

Text overlay

Of course, we can overlay text to videos and images. The following is a nice tribute to Lorem ipsum dummy text.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                },
                {
                    "type": "text",
                    "template": "basic\/001",
                    "items": [
                        {
                            "text": "<em>Lorem Ipsum<\/em> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
                            "color": "#FFFFFF",
                            "font-size": 60,
                            "font-family": "Roboto Condensed",
                            "shadow": 2,
                            "text-align": "left",
                            "em-color": "#FFFFFF",
                            "em-background-color": "#FFB703"
                        },
                        {
                            "text": "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
                            "color": "#FFFFFF",
                            "font-size": 60,
                            "font-family": "Birthstone"
                        }
                    ],
                    "width": 960,
                    "x": 900,
                    "y": 50
                }
            ]
        }
    ]
}

The movie script does the following:

In the font-family property you can use any system font (Arial, Georgia, sans-serif, serif, monospace) or use any Google Font. Be careful because Google Font font-family names are case sensitive, and must match with an existing font-weight.

Text animation

Text elements also allow you to create text animations based on existing templates. You can browse all the available text templates in the library.

The following example uses the basic/005 template to show a simple text animation on an empty scene:

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "text",
                    "template": "basic\/005",
                    "items": [
                        {
                            "text": "JSON2Video",
                            "shadow": 0,
                            "font-size": 100,
                            "font-family": "Inter",
                            "font-weight": "900"
                        },
                        {
                            "text": "Your video API",
                            "shadow": 0,
                            "font-size": 100,
                            "font-family": "Inter",
                            "font-weight": "900"
                        }
                    ],
                    "x": 0,
                    "y": 510,
                    "width": 1920,
                    "height": 1080,
                    "duration": 5
                }
            ]
        }
    ]
}

The resulting video is:

Lower-third animation

In the television industry, a lower third is a graphic overlay placed in the lower area of the screen, though not necessarily the entire lower third of it, as the name suggests.

JSON2Video library has some lower-third templates you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/spacex-01.mp4"
                },
                {
                    "type": "text",
                    "template": "basic\/020",
                    "items": [
                        {
                            "text": "SpaceX's Falcon Heavy rocket is ready"
                        },
                        {
                            "text": "First launch is planned for February 2018"
                        },
                        {
                            "text": "Space tech"
                        }
                    ],
                    "x": 50,
                    "y": 880,
                    "width": 1820,
                    "start": 7,
                    "duration": 10
                }
            ]
        }
    ]
}

The basic/020 template is inpired on the lower thirds used by CNN. The template only requires you to provide two or three text items.