Rendley docs

Clip types

HTML text clips

The HtmlTextClip renders a snippet of HTML as a visual element on the canvas. Useful when you need mixed styles, nested elements, or inline formatting that plain TextClip does not support.

Everything is rendered inside a <span> element, so any HTML and CSS that a span can contain is valid.

Create an HTML text clip

Runnable example
const clip = await layer.addClip({
  type: "html_text",
  htmlText: `
    <span style="
      background: linear-gradient(90deg, #ff4d6d, #6d6ff2);
      -webkit-background-clip: text;
      color: transparent;
      font-size: 160px;
      font-weight: 900;
    ">
      Gradient text
    </span>
  `,
  fonts: [],
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);

Fonts

If your HTML uses custom fonts, list them in the fonts array. Each entry must also be registered through the FontRegistry:

await layer.addClip({
  type: "html_text",
  htmlText: `<span style="font-family: Inter, sans-serif">Hello</span>`,
  fonts: ["Inter"],
  startTime: 0,
  duration: 5,
});

Update the content

htmlTextClip.setHtmlText(`<span>Updated</span>`);