How to Add Text to Video using Node.js?

Considering how many videos are viewed without sound, adding text to the video becomes essential to sharing them on social media. To add text to a video using JavaScript, you'll need an editing API that has the server infrastructure for video rendering. Here's how to do that using Node.js in just a few lines of code:

const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');

client.render({
  source: new Creatomate.Source({
    output_format: 'mp4',
    elements: [
    
      new Creatomate.Video({
        track: 1,
        source: 'https://cdn.creatomate.com/demo/mountains.mp4',
      }),
      
      new Creatomate.Text({
        track: 2,
        y: '63.12%',
        width: '90.48%',
        height: '15.12%',
        xAlignment: '50%',
        yAlignment: '50%',
        text: 'Add your custom text here. ✍️',
        fontFamily: 'Roboto',
        fontWeight: '500',
        fontSizeMaximum: '10 vmin',
        backgroundColor: '#ffffff',
        backgroundXPadding: '52%',
        backgroundBorderRadius: '26%',
      }),
    ],
  }),
}).then((renders) => {
  console.log(renders);
});

How it works: First, begin by installing the Creatomate library from NPM. Once installed, proceed to create a scene consisting of two elements. The first element is a video placed on track 1, while the second element is a text placed on track 2. As they are placed on separate tracks, both elements will be displayed simultaneously. The definition order of these elements is important to make sure the video is displayed in the background.

To ensure the text adapts to the dimensions of the background video, use relative units (%) for the position attributes. This will allow the text to automatically adjust based on the background video's size.

For the desired styling, modify the font properties accordingly. For instance, if you aim to replicate the popular Instagram aesthetic, style the font with a rounded background. However, if you prefer the TikTok style, you can use the stroke properties to achieve that effect as well. Additionally, the text element has support for emojis, enabling you to include them in your captions as well.

Try out the video editor if you are interested in making your own video designs. This online tool lets you create your own text styles and animations to use within your Node.js application.