Serialization

Since version 3.4.2, PhotoEditorSDK's Editor UI supports serialization and deserialization of application states. This means that you can export the current state of the editor and import it later on.

The serialization schema is specified here.

Serialization#

In order to serialize the editor state, simply call serialize() on the Editor instance:

editor
  .serialize({ image: true }) // Default { image: false }
  .then(state => {
    console.log('Editor state:', state);
  })
  .catch(err => {
    console.err('An error has occured ', err);
  });

This will serialize the editor state and write the result to the console.

The image option specifies whether or not the input image should be serialized as well. Enabling this will highly increase the size of the resulting object.

Deserialization#

In order to deserialize / load an editor state, simply call deserialize() on the Editor instance and pass the editor state object:

editor
  .deserialize(state)
  .then(() => {
    console.log('Restored state!');
  })
  .catch(err => {
    console.err('An error has occured ', err);
  });

This will restore the editor state.

Serialization modal#

After calling .serialize there will be modal shown which will state Saving... for displaying in-between state for serialization start and end. There is displaySerializationModal in top level configuration to enable/disable the modal from being shown.

const editor = await PhotoEditorSDKUI.init({
  displaySerializationModal: false,
});