Skip to main content

Save Scenes to an Archive

In this example, we will show you how to save scenes as an archive with the CreativeEditor SDK.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

The CreativeEngine allows you to save scenes in a binary format to share them between editors or store them for later editing. As an archive, the resulting Blob includes all pages and any hidden elements and all the asset data.

To get hold of such a Blob, you need to use engine.scene.saveToArchive(). This is an asynchronous method returning a Promise. After waiting for the Promise to resolve, we receive a Blob holding the entire scene currently loaded in the editor including its assets' data.

That Blob can then be treated as a form file parameter and sent to a remote location.

Loading Scene Archives#

Loading a scene archives requires unzipping the archives contents to a location, that's accessible to the CreativeEngine. One could for example unzip the archive via unzip and then serve its contents using $ npx serve. This spins up a local test server, that serves everything contained in the current directory at http://localhost:3000

The archive can then be loaded by calling await engine.scene.loadFromURL('http://localhost:3000/scene.scene'). See loading scenes for more details. All asset paths in the archive are then resolved relative to the location of the scene.scene file. For an image, that would result in 'http://localhost:3000/images/1234.jpeg'. After loading all URLs are fully resolved with the location of the scene.scene file and the scene behaves like any other scene.

Resolving assets from a different source#

The engine will use its URI resolver to resolve all asset paths it encounters. This allows you to redirect requests for the assets contained in archive to a different location. To do so, you can add a custom resolver, that redirects requests for assets to a different location. Assuming you store your archived scenes in a scenes/ directory, this would be an example of how to do so:

import CreativeEngine from '';
const config = {
baseURL: ''
CreativeEngine.init(config).then(async (engine) => {
engine.scene.saveToArchive().then((blob) => {
const formData = new FormData();
formData.append("file", blob);
fetch("/upload", {
method: "POST",
body: formData
}).catch((error) => {
console.error('Save failed', error)