Skip to main content

Persistance in the Editor Starter

There are 3 types of persistance in the Editor Starter:

  • Saving the editor state
  • Caching the assets (videos, images, audio, etc.) in IndexedDB
  • Saving the loop setting

Saving the editor state​

The functions saveState() and loadState() are used to save and load the editor state.

Location​

By default, the state is saved to the browser's local storage.

If you want to save the state remotely, you can:

  1. change the implementation of these functions
  2. turn these function into promises
  3. await their usage.

Triggering a save​

There are 2 ways to save the state:

  • By clicking the "Save" button in the top toolbar
  • By using the keyboard shortcut Cmd/Ctrl + S (source)

See our suggestion for implementing an auto-save feature if you want to save the state automatically.

Scope​

By default only the undoable state is persisted.

The Editor Starter has a simplified assumption that the undoable state portion of the state that should be persisted.

If you also want to persist parts of the non-undoable state, you can accept more data in the saveState() and loadState() functions.

Disabling​

The save functionality is behind the feature flags FEATURE_SAVE_BUTTON and FEATURE_SAVE_SHORTCUT.

Disable the flag or delete the flag and all the code that is behind it to disable the save functionality.

Persistance key​

When using the default implementation of the saveState() and loadState() functions, the state is saved to the browser's local storage under a versioned key, e.g. const key = 'remotion-editor-starter-state-v1'.

Make sure to only save states to this key that are compatible with the schema you operate on at runtime.
If you change the structure of your state, consider incrementing the version of the key, or migrating the state to the new schema at load.

Caching assets​

Because loading the assets remotely can be slow, the Editor Starter caches them in IndexedDB and prefers them over remote assets when displaying.

The indexeddb.ts file contains the implementation of the IndexedDB.

Assets need to be manually cleaned up when they are no longer needed: Asset cleanup

The <DownloadRemoteAssets> component downloads any assets that are remote and caches them locally.

The <UseLocalCachedAssets> component loads cached assets from IndexedDB and turns them into blob URLs.
In addition, the initialize() function will load any cached assets from IndexedDB before the initial editor state loaded, to prevent any requests to the remote server if possible.

Loop setting​

In src/editor/state/loop-persistance.ts, there is logic for persisting the loop setting.

See also​