HTML Text

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

Full runnable example

import { Engine } from "@rendley/sdk";

await Engine.getInstance().init({
  license: {
    licenseName: "DOCS_PLAYGROUND",
    licenseKey: "DOCS_KEY",
  },
  display: {
    width: 1920,
    height: 1080,
    backgroundColor: "#000000",
    view: document.getElementById("rendley-canvas") as HTMLCanvasElement,
  },
});

const layer = Engine.getInstance().getTimeline().createLayer();

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

await Engine.getInstance().getTimeline().play();

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

See Also

Text
Fonts
API reference: HtmlTextClip