Rendley SDK

Appearance

Clips ​

A clip is the smallest unit of a composition. Every clip lives on a layer on the timeline. Clips expose a common API for timing, visibility, effects, filters, animation, and masking, on top of that, each clip type (text, video, shape, lottie, and so on) adds its own specific methods.

This page covers:

Adding a Clip ​

Call layer.addClip() with the clip's options. The return value is the created clip.

typescript
await layer.addClip({
  type: "text",
  text: "Hello World",
  startTime: 0,
  duration: 3,
  style: { fontSize: 140, color: "#FFFFFF", position: [960, 540] },
});
Idle

Media-based clips (video, audio, image, GIF, SVG) need a mediaDataId pointing to an entry in the Library:

typescript
const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia("https://example.com/photo.jpg");

await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});

NOTE

Two clips cannot overlap on the same layer. If you want a clip to sit on top of another, create a new layer and add it there.

Adjust Layout on Add ​

By default, adding a clip that overlaps existing clips on the same layer pushes the others to make room. Disable this behavior when you want the call to fail silently rather than reflow:

typescript
await layer.addClip({ mediaDataId, startTime: 0 }, { adjustLayout: false });

Clip Types ​

Each clip type has its own page covering its constructor options and type-specific API.

Media ​

ClipWhat it renders
VideoA video file with trim, freeze frame, playback speed, and audio extraction.
AudioAn audio file with trim, volume, fade in / fade out, and playback speed.
ImageA static image (JPEG, PNG, WebP, HEIC).
GifAn animated GIF.
SvgA vector graphic that stays crisp at any resolution.

Generative ​

ClipWhat it renders
TextText drawn on the canvas with font, color, stroke, and drop shadow controls.
HTML TextAn HTML snippet rendered as a visual element.
ShapeRectangles, circles, triangles, stars, polygons, beziers.
LottieAn After Effects composition (Lottie JSON).

Special ​

ClipWhat it does
SubtitlesTime-synced captions sourced from the Library.
AdjustmentApplies effects and filters to everything below it on the frame.
PlaceholderHolds a timeline slot until its media finishes loading.
CustomYour own clip type, extending the base Clip class.

Common API ​

Every clip type inherits the following controls. Use this section as a reference when you're unsure which page to look at.

Timing and Trimming ​

typescript
clip.setStartTime(2);
clip.setLeftTrim(0.5);
clip.setRightTrim(0.5);
clip.moveBy(1);

clip.getStartTime();
clip.getEndTime();
clip.getDuration();
clip.getTrimmedDuration();

Visibility and Audio ​

typescript
clip.setVisible(false);
clip.setMuted(true);
clip.setVolume(0.5);

For smooth fade-in / fade-out on audio, see Playback Speed & Fades.

Blend Mode ​

Controls how the clip blends with content on layers below it:

typescript
import { BlendModeEnum } from "@rendley/sdk";

clip.setBlendMode(BlendModeEnum.SCREEN); // NORMAL | ADD | SCREEN | MULTIPLY

Wrap Mode ​

Controls what happens outside the clip's duration for looping clips (Lottie, GIF, custom):

typescript
import { WrapModeEnum } from "@rendley/sdk";

clip.setWrapMode(WrapModeEnum.PING_PONG); // CLAMP | REPEAT | PING_PONG | EMPTY

Effects, Filters, and Masking ​

All clips can receive effects and filters, and any clip can be used as an alpha mask for another.

Animation ​

Every clip exposes two animation systems. Use whichever fits the task:

Custom Data ​

Attach metadata that survives serialization:

typescript
clip.setCustomData("source", "https://example.com/source");
const src = clip.getCustomData("source");
clip.hasCustomData("source");
clip.clearAllCustomData();

The same API is available on Engine, Library, Timeline, Layer, and MediaData.

See Also ​