Save & Restore the Project
The SDK supports serialization and deserialization, enabling you to store the composition in a database and retrieve it later.
Serialization
Serialization is the process of transforming the state of the SDK into JSON format. This allows you to save the current configuration and state of your project.
typescript
import { Engine } from "@rendley/sdk";
const serialized = Engine.getInstance().serialize();INFO
The serialized state includes a schema version, which is used to ensure backward compatibility.
Try It
Build a small composition, serialize it, log the JSON to the status bar, then clear the timeline and deserialize to see the composition come back exactly as it was.
typescript
// Build a small composition.
const title = await layer.addClip({
type: "text",
text: "Serialize me",
startTime: 0,
duration: 4,
style: { fontSize: 140, color: "#FFFFFF" },
});
title.style.setPosition(960, 540);
// 1. Serialize.
const state = Engine.getInstance().serialize();
console.log("Serialized state:", JSON.stringify(state).slice(0, 120), "...");
// 2. Wipe the timeline.
Engine.getInstance().getTimeline().reset();
// 3. Restore from the saved state.
await Engine.deserialize(state);
await Engine.getInstance().getTimeline().play();TIP
Open the preview's status bar (bottom of the iframe) to see the serialized JSON preview that was printed.
Example: Serialized State
json
{
"version": "0.0.1",
"display": {
"width": 1920,
"height": 1080,
"backgroundColor": "#000000"
},
"timeline": {
"startTime": 124.181,
"fps": 30,
"layers": [
{
"id": "8e32e0a0-12cb-43d8-ba9d-839600e41389",
"isEnabled": true,
"isMuted": false,
"clips": [
{
"id": "0297380c-517f-41ea-b9f6-f40e12fd6ff2",
"type": "video",
"mediaDataId": "cd446030-3af4-4ff5-b06d-83c76a45fc98",
"subtitlesOffset": 0,
"startTime": 0,
"duration": 64.5,
"leftTrim": 0,
"rightTrim": 57.43333333333333,
"filters": [],
"effects": [],
"warpMode": "empty",
"style": {
"clipId": "0297380c-517f-41ea-b9f6-f40e12fd6ff2",
"mediaDataId": "cd446030-3af4-4ff5-b06d-83c76a45fc98",
"alpha": 1,
"rotation": 0,
"position": [960, 540],
"scale": [0.6374268785972704, 0.6374266304326051],
"zIndex": 0,
"cornerRadius": [0, 0, 0, 0],
"relativeCornerRadius": false
}
}
],
"transitions": []
},
{
"id": "68042949-414e-4698-88de-f2172043e32a",
"isEnabled": true,
"isMuted": false,
"clips": [
{
"id": "ea6e97f3-f034-436d-b4f9-2846395d5b9c",
"type": "gif",
"mediaDataId": "a87ac429-2f60-4841-a111-f669c1166a06",
"subtitlesOffset": 0,
"startTime": 0,
"duration": 6.61,
"leftTrim": 0,
"rightTrim": -0.4666666666666667,
"filters": [],
"effects": [],
"warpMode": "repeat",
"style": {
"clipId": "ea6e97f3-f034-436d-b4f9-2846395d5b9c",
"mediaDataId": "a87ac429-2f60-4841-a111-f669c1166a06",
"alpha": 1,
"rotation": 0,
"position": [211.5484599385956, 181.74729127463604],
"scale": [1, 1],
"zIndex": 0,
"cornerRadius": [0, 0, 0, 0],
"relativeCornerRadius": false
}
}
],
"transitions": []
},
{
"id": "92ad7cb8-d4e5-406f-a0d3-397eb0e185e4",
"isEnabled": true,
"isMuted": false,
"clips": [
{
"id": "26199d5c-95c6-4e88-b90e-92a697717a0e",
"type": "text",
"subtitlesOffset": 0,
"startTime": 0,
"duration": 1,
"leftTrim": 0,
"rightTrim": -6.1,
"filters": [],
"effects": [],
"warpMode": "empty",
"style": {
"clipId": "26199d5c-95c6-4e88-b90e-92a697717a0e",
"alpha": 1,
"rotation": 0,
"position": [1459.7267089234426, 900.5348143012776],
"scale": [1, 1],
"zIndex": 0,
"cornerRadius": [0, 0, 0, 0],
"relativeCornerRadius": false,
"fontSize": 100,
"color": "#FFFFFF",
"fontWeight": "400",
"fontFamily": "Arial",
"textAlign": "justify",
"fontStyle": "normal",
"backgroundColor": null
},
"text": "Playground Project"
}
],
"transitions": []
},
{
"id": "be0e5c1d-f029-4b27-87c1-5ae4af00742b",
"isEnabled": true,
"isMuted": false,
"clips": [
{
"id": "13fda042-c1ef-4821-a86c-136bc762e900",
"type": "image",
"mediaDataId": "72dbec19-192d-450f-8773-5d0d57d8d87d",
"subtitlesOffset": 0,
"startTime": 0,
"duration": 1,
"leftTrim": 0,
"rightTrim": -6.133333333333334,
"filters": [],
"effects": [],
"warpMode": "empty",
"style": {
"clipId": "13fda042-c1ef-4821-a86c-136bc762e900",
"mediaDataId": "72dbec19-192d-450f-8773-5d0d57d8d87d",
"alpha": 1,
"rotation": 0.3376361090159211,
"position": [1555.567833846607, 416.7797325014967],
"scale": [0.09245987955458913, 0.09245985968828299],
"zIndex": 0,
"cornerRadius": [0, 0, 0, 0],
"relativeCornerRadius": false
}
}
],
"transitions": []
}
]
},
"library": {
"media": [
{
"id": "cd446030-3af4-4ff5-b06d-83c76a45fc98",
"type": "video",
"filename": "5329239-hd_720_1366_25fps.mp4",
"permanentUrl": "https://videos.pexels.com/video-files/5329239/5329239-hd_720_1366_25fps.mp4"
},
{
"id": "a87ac429-2f60-4841-a111-f669c1166a06",
"type": "gif",
"filename": "giphy.gif_cid=3654b759nrxfnmc5g2btr2wymg420ry13uoejtjne94g4snd&ep=v1_gifs_trending&rid=giphy.gif&ct=g",
"permanentUrl": "https://media3.giphy.com/media/tHIRLHtNwxpjIFqPdV/giphy.gif?cid=3654b759nrxfnmc5g2btr2wymg420ry13uoejtjne94g4snd&ep=v1_gifs_trending&rid=giphy.gif&ct=g"
},
{
"id": "72dbec19-192d-450f-8773-5d0d57d8d87d",
"type": "image",
"filename": "pexels-photo-27978911.jpeg",
"permanentUrl": "https://images.pexels.com/photos/27978911/pexels-photo-27978911.jpeg"
}
],
"subtitles": []
}
}Deserialization
Deserialization initializes the SDK from a JSON object. It is important to ensure that the Engine has been initialized before running the deserialize method.
typescript
import { Engine } from "@rendley/sdk";
await Engine.getInstance().init({
license: {
licenseName: "YOUR_LICENSE_NAME",
licenseKey: "YOUR_LICENSE_KEY",
},
display: {
width: 1080,
height: 1920,
backgroundColor: "#000000",
view: document.getElementById("myCanvas"),
},
});
await Engine.deserialize(serialized);TIP
Avoid calling deserialize multiple times to reflect changes in the JSON, as this will reinitialize many resources and may negatively impact performance. Instead, apply only the differences when necessary.