Storing Data

Plugins have two ways to store data, each suited for different use cases:

Storage	Persisted Where	Saved with File	Limit	Value Types
`creator.clientStorage`	User's browser	No	5 MB	Boolean, number, string, object, array
`node.data`	Animation file	Yes (not exported)	5 kB per node	Strings only

Client storage

Use creator.clientStorage for data that should persist across sessions but doesn't need to be saved with the animation file.
This is ideal for user preferences, plugin settings, and cached data.

// In plugin sandbox (plugin.ts)

// Save data
await creator.clientStorage.set("lastUsedColor", "#FF5733");

// Retrieve data
const color = await creator.clientStorage.get("lastUsedColor");
console.log("Last used color:", color);

// List all keys
const keys = await creator.clientStorage.keys();
console.log("Stored keys:", keys);

// Check storage usage
const usedBytes = await creator.clientStorage.usedQuota();
console.log("Used storage:", usedBytes, "bytes");

// Delete a specific key
await creator.clientStorage.delete("lastUsedColor");

// Clear all plugin data
await creator.clientStorage.clear();

Node storage

Use node.data for data that should be saved with the animation file or be associated with specific nodes in the scene.
This is ideal for layer metadata, custom properties, and plugin state that's specific to the current project.
Note: node storage data is saved with the Lottie Creator file but is not retained when exported to a Lottie animation.

// In plugin sandbox (plugin.ts)

// Get a layer to store data on
const layers = creator.activeScene.layers;

if (layers.length > 0) {
  const layer = layers[0];

  // Store string values
  layer.data.set("customId", "my-special-layer");

  // For complex data, stringify it first (values must be strings)
  layer.data.set(
    "metadata",
    JSON.stringify({
      created: Date.now(),
      author: "Plugin User",
    })
  );

  // Retrieve data
  const customId = layer.data.get("customId");
  console.log("Custom ID:", customId);

  // Parse complex data
  const metadata = JSON.parse(layer.data.get("metadata") ?? "{}");
  console.log("Created at:", metadata.created);

  // List all keys on this node
  console.log("Node data keys:", layer.data.keys);

  // Check storage usage on this node
  console.log("Used quota:", layer.data.usedQuota, "bytes");

  // Delete a specific key
  layer.data.delete("customId");

  // Clear all plugin data from this node
  layer.data.clear();
}

Important

Client storage is stored in the browser and can be inspected via developer tools. Avoid storing sensitive data.
Node storage is saved in the animation file. Users can potentially access it if they inspect the file. Avoid storing sensitive data.
Both storage types are specific to your plugin ID. If your plugin ID changes, you won't be able to access or update the data.

Example

Storing data example →