Skip to main content

Persistance in the Editor Starter

There are 2 types of persistance in the Editor Starter:

  • Saving the editor state
  • Caching the assets (videos, images, audio, etc.)

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 Ctrl/Cmd + 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 flag FEATURE_SAVE_STATE.

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​

TODO