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.

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

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

fontSize

Allows you to change the size of your text in pixels from the 100px.

Example

composition.addText({
  fontSize: 250,
  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.

Example

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

Output

lineHeight

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.

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'.

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

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:

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);

Output