Text

Layer options

backgroundColor

Add a background color to your text. Accepts any hexadecimal, rgb, or named color.

There is 10px of padding by, which you can adjust with the padding option.

You can make the background box larger by providing a size layer configuration. When you have specified a custom size for your background, you can adjust the positioning of the text within the background by modifying the textPosition attribute.

Example

composition.addText({
  backgroundColor: "#0968af",
  text: "Editframe is fun!",
});

Output

backgroundTransform

Apply a css transform to the background of your text. You can apply a separate transformation to the text itself via the textTransform attribute.

backgroundTransform will have no noticable effect unless you have specified a backgroundColor.

Example

composition.addText({
  backgroundColor: "#0968af",
  backgroundTransform: "skewX(-10deg)",
  text: "Editframe is fun!",
});

Output

border

Add a border to your text.

Example

composition.addText({
  border: "10px dashed #ffffff",
  text: "Editframe is fun!",
});

Output

borderRadius

borderRadius will have no visible effect unless you have specified a background color or a border.

Allows you to round the corners of the background.

Example

composition.addText({
  backgroundColor: "#0968af",
  borderRadius: 10,
  text: "Editframe is fun!",
});

Output

color

Allows you to change the color of your text from the white. Accepts any hexadecimal, rgb, or named color.

Example

composition.addText({
  color: "#0968af",
  text: "Editframe is fun!",
});

Output

fontFamily

Allows you to change the font of your text from the Helvetica. We support all of the fonts available in Google Fonts.

Example

composition.addText({
  fontFamily: "Lobster",
  text: "Editframe is fun!",
});

Output

fontStyle

Change the font-style of your text from the normal. Accepts: italic, normal.

Example

composition.addText({
  fontStyle: "italic",
  text: "Editframe is fun!",
});

Output

fontWeight

Change the font-weight of your text from the 400. Accepts: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.

You should only use font weights supported by the font you are using, otherwise there may be no visible effect.

Example

composition.addText({
  fontWeight: "bold",
  text: "Editframe is fun!",
});

Output

lineHeight

The lineHeight option only applies if your text spans multiple lines.

Change the line-height of your text from the of 1.2 times the fontSize.

Default

Example

composition.addText({
  lineHeight: 3,
  text: "Editframe is fun! I use it for all of my programmatic video production needs. I especially like adding text to my videos.",
});

Output

padding

Change the padding of your text from the 10px. This will increase the size of your background.

Example

composition.addText({
  backgroundColor: "#0968af",
  padding: 100,
  text: "Editframe is fun!",
});

Output

text

Specify what your text layer should say! You can use markup tags like <em>, <strong> and <span> to format individual words or characters.

If no size configuration is provided and the provided text is less than the width of the composition, the width of the backgroundColor will be equal to the width of the text plus the padding.

If no size configuration is provided and the width of the provided text is greater than the width of the composition, the width of the backgroundColor will be set to the width of the composition and the text will wrap to multiple lines.

Single Line Example

composition.addText({
  text: "Add <em>marked up</em> & <span style='color: yellow;'> inline-styled</span> text!",
});

Single Line Output

Multiple Line Example

composition.addText({
  text: `Editframe makes me <em><strong>so</strong></em>
  <span style='color: yellow'>happy</span>
  that sometimes I just need to write about it... <br />in a video.`,
});

Multiple Line Output

textAlign

Allows you to change the text-align attribute from the 'left'. Accepts: 'left', 'center', 'justify', and 'right'.

The textAlign attribute will have no visible effect unless:

The provided text is long enough to wrap onto multiple lines
Or, the provided text is short enough to fit on a single line, and a size layer configuration is specified that increases the size of the text layer to be larger than the width of the text.

Single Line Example

composition.addText(
  {
    backgroundColor: "#0968af",
    text: "Editframe is fun!",
    textAlign: "right",
  },
  {
    size: {
      width: 900,
    },
  }
);

Output

Mutiple Line Example

composition.addText(
  {
    backgroundColor: "#0968af",
    text: "Editframe is fun! I can't wait to tell my friends about it.",
    textAlign: "right",
  },
  {
    size: {
      width: 900,
    },
  }
);

Output

textDecoration

Change the textDecoration of your text from the none.

Example

composition.addText({
  text: "Editframe is fun!",
  textDecoration: "underline dotted #ffffff",
});

Output

textPosition

Allows you to position the text within its background. Defaults to {x: 'center', y: 'center'}

The textPosition attribute will only come into effect if a size layer configuration is specified that increases the size of the text layer to be larger than the width of the text.

The x attribute will only be honored if the provided text spans a single line. This is because multiple lines of text inherently take up more than the full width of the background, so there is no wiggle room to reposition the text. That said, you can use the textAlign attribute to adjust the alignment of multiple lines of text.

Single Line Example

composition.addText(
  {
    backgroundColor: "#0968af",
    text: "Editframe is fun!",
    textPosition: {
      x: "right",
      y: "bottom",
    },
  },
  {
    size: {
      height: 800,
      width: 800,
    },
  }
);

Single Line Output

Multiple Lines Example

composition.addText(
  {
    backgroundColor: "#0968af",
    text: "multiple lines positioned at the bottom, with textAlign: 'right'",
    textAlign: "right",
    textPosition: {
      y: "bottom",
    },
  },
  {
    size: {
      height: 800,
      width: 1800,
    },
  }
);

Single Line Output

textTransform

Apply a css transform to your text within it's background. If the transform causes the text to exceed the bounds of the background, the excess will be cut off. You can apply a separate transformation to the background via the backgroundTransform attribute.

Example

composition.addText({
  textTransform: "skewY(3deg)",
  text: "Editframe is fun!",
});

Output

tailwind

Use TailwindCSS classes in your text. Tailwind css classes will be applied only to your text content.

Note: Tailwind css classes will use the default tailwind configuration.

Example

composition.addText({
  text: "Editframe is fun!",
  tailwind:"text-4xl font-bold tracking-tight text-indigo-600 bg-white"
});

Output

Text layer configuration

The optional config argument supports the following layer configuration properties:

Unlike an audio or video file, text has no inherent duration. Therefore, text layers to having the full duration of the overall composition.

If you want to reduce the duration of your text layer, use the trim layer configuration.

Text class

Calling composition.addText() returns an instance of the Text class, which allows you to read/update its layer options and read/update its layer configuration through getters/setters.

Reading and updating layer options

text.type; // "text"

text.setBackgroundColor("#ffffff");
text.backgroundColor; // "#ffffff"

text.setBackgroundTransform("skewX(-10deg)");
text.backgroundTransform; // "skewX(-10deg)"

text.setBorder("10px dashed #ffffff");
text.border; // "10px dashed #ffffff"

text.setBorderRadius(20);
text.borderRadius; // 20

text.setColor("#000000");
text.color; // "#000000"

text.setFontFamily("Times New Roman");
text.fontFamily; // "Times New Roman"

text.setFontSize(100);
text.fontSize; // 100

text.setFontStyle("italic");
text.fontStyle; // "italic"

text.setFontWeight(600);
text.fontWeight; // 600

text.setLineHeight(40);
text.lineHeight; // 40

text.setPadding(50);
text.padding; // 50

text.setText("Hello from Editframe");
text.text; // "Hello from Editframe"

text.setTextAlign("right");
text.textAlign; // 'right'

text.setTextDecoration("underline dotted");
text.textDecoration; // "underline dotted"

text.setTextPosition({ x: "left", y: "bottom" });
text.textPosition; // { x: 'left', y: 'bottom'}

text.setTextTransform("skewY(3eg)");
text.textTransform; // "skewY(3deg)"

Examples

Minimal

composition.addText({
  text: "I love Editframe!",
});

Output

All text options and layer configuration

composition.addText(
  // options
  {
    backgroundColor: "#0968af",
    border: "10px dashed #ffffff",
    borderRadius: 10,
    color: "#ffc0cb",
    fontFamily: "Lobster",
    fontSize: 150,
    fontStyle: "italic",
    fontWeight: "bold",
    lineHeight: 1.5,
    padding: 75,
    text: "Editframe makes me so happy!",
    textAlign: "right",
    textDecoration: "underline",
    textPosition: {
      x: "left",
      y: "bottom",
    },
  },

  // layer config
  {
    position: {
      x: "center",
      y: "center",
    },
    size: {
      height: 600,
      width: 1200,
    },
    timeline: {
      start: 0.5,
    },
    trim: {
      end: 4,
    },
  }
);

Output

Method chaining approach

composition;
composition
  .addText({
    backgroundColor: "#0968af",
    border: "10px dashed #ffffff",
    borderRadius: 10,
    color: "#ffc0cb",
    fontFamily: "Lobster",
    fontSize: 150,
    fontStyle: "italic",
    fontWeight: "bold",
    lineHeight: 1.5,
    padding: 75,
    text: "Editframe makes me so happy!",
    textAlign: "right",
    textDecoration: "underline",
    textPosition: {
      x: "left",
      y: "bottom",
    },
  })

  // Position
  .setX("center")
  .setY("center")

  // Size
  .setHeight(600)
  .setWidth(1200)

  // Timeline
  .setStart(0.5)

  // Trim
  .setTrim(0, 4);