Rendley SDK

Appearance

Concepts ​

A high-level map of how the SDK fits together. If you've worked with non-linear video editors before (Final Cut, Premiere, DaVinci Resolve), most of the model will feel familiar.

Engine ​

The Engine is the entry point. It's a singleton, you call Engine.getInstance().init(...) once at startup with a license and a canvas, and every other SDK call flows through it. The Engine owns the timeline, the library, the display, the renderer, and the settings.

Display ​

The Display is the WebGL canvas the SDK renders into. It defines the composition's resolution (1920×1080, 1080×1920 for portrait, or whatever you configure) and the background color. The display's DOM size can differ from the composition resolution, scaling is automatic.

Library ​

The Library is the asset store. Every image, video, audio file, font, effect, filter, transition, and subtitle source goes in here before a clip can reference it. Media is content-hashed, making assets easy to identify while preventing duplicate storage.

MediaData ​

Each entry in the Library is a MediaData, metadata (dimensions, duration, file type), the underlying blob, lifecycle status, and helpers for sample extraction and persistence.

Timeline ​

The Timeline is the composition. It owns the playback clock, the layers, and the playback controls (play, pause, seek, stop). All edits happen through it.

Layer ​

A Layer is a horizontal track of non-overlapping clips. Layers stack vertically: the first layer is the bottom, each new layer renders on top. Use multiple layers when you want clips to overlap visually or when you need independent audio tracks.

Clip ​

A Clip is the smallest unit on a layer. It can be a piece of media (video, image, audio, GIF, SVG), a drawn element (text, shape, Lottie), or a special clip like a subtitles track, an adjustment layer, or a custom clip you authored yourself.

Animation ​

Two animation systems run side by side:

  • Keyframe Animation: one track per property, bezier handles, compound tracks, and support for animating effect and filter parameters.
  • Animation Controller: In / Out / Loop phases driven by clip.animationController.

Effects, Filters, Transitions ​

  • Effects are GLSL shader passes applied per clip. The SDK ships with 30+ built-ins; you can add your own.
  • Filters are LUT-based color grades. Ship .png LUTs (the format exported by tools like Photoshop and 3D LUT Creator) and attach them to clips.
  • Transitions are GLSL shaders applied between two adjacent clips on the same layer.

Subtitles ​

Subtitles are managed as native project assets. Import from SRT or build programmatically. Style globally through the SubtitlesManager, every subtitles clip in the project picks up the current style.

Storage ​

By default, media is stored only in browser memory and disappears on refresh. Plug in a Storage provider (IndexedDB for local, AWS S3 with presigned URLs for cloud) to persist media across sessions. The SDK comes with a ready-to-use IndexedDB storage provider and examples for S3 storage.

Events ​

The SDK emits events on every state change, media added, clip moved, effect updated, animation changed, render completed. Use them to drive your UI without polling.

Undo / Redo ​

An opt-in UndoManager records every state change (provided you initialize the Engine with enableUndoRedo: true) and lets you group multiple operations into a single undoable step.

Rendering ​

Rendering runs through the Engine's export pipeline. By default it uses WebCodecs for hardware-accelerated encoding. Projects larger than the browser's blob allocation limit can opt into chunked output. For server-side rendering, the rendering server runs the same SDK inside headless Chromium.

UI ​

The SDK is headless by default, giving you the rendering engine and events to build any interface you need. For teams that want a ready-to-use editor, the Video Editor UI wraps the SDK in a complete web component with a timeline, canvas handles, sidebar, and export dialog.