Rendley docs

Help and reference

Best practices

Here are some best practices to achieve optimal performance with the SDK.

Do not upload images for simple shapes

If you need a rectangle, circle, or any other basic shape, it is better to use the Shape clip instead.

Avoid calling deserialize to apply updates

Calling deserialize multiple times can initialize many internal resources unnecessarily. If you frequently apply updates using JSON, it is more efficient to identify the changes and apply them manually, or use Timeline.loadSerializedData for partial updates.

Check isSafeToSerialize before saving

The Library processes media asynchronously (transcoding, hashing, filmstrip, samples). Saving in the middle of this work produces incomplete JSON. Always gate saves on Engine.isSafeToSerialize().

Stream large exports, do not merge them in memory

For projects larger than 2GB enable chunked output and stream the chunks straight to disk or network. Merging chunks in the browser hits the single-blob allocation limit.

Prefer xxHash for large files

SHA-256 is slow on large inputs. For files larger than a few hundred MB, switch to xxHash. xxHash is non-cryptographic but sufficient for content addressing.

Recompute layout after programmatic changes

Methods like setPlaybackSpeed, setStartTime, setLeftTrim, and setRightTrim can change a clip’s position or duration in the timeline. Call Timeline.adjustClipsLayout() afterwards so overlapping clips are reflowed.

Scope undo/redo groups

When performing a compound change (for example, transform + style + text), wrap the operations in a single undo group so the user can undo them atomically. See Undo / Redo.

Preload fonts before adding text

Font loading is asynchronous and can cause a flash of unstyled text on the canvas. Call FontRegistry.loadFromCssUrl() before creating text clips:

await Engine.getInstance()
  .getFontRegistry()
  .loadFromCssUrl("Inter", "https://fonts.googleapis.com/css2?family=Inter&display=swap");
// Now text clips using "Inter" render immediately.

Dispose the engine on unmount

In single-page applications, destroy the engine when the editor component unmounts to free GPU and memory resources:

Engine.getInstance().dispose();

Skipping this in a React or Vue app leads to WebGL context leaks if the user navigates away and back.

Pin media to layers deliberately

Clips on the same layer cannot overlap in time. If you add media programmatically, assign it to explicit layers rather than relying on auto-placement. See Layers for the API.