Saving custom data into a design

How to save additional metadata into a design?

In some use cases, you may want to save your own data into the store/page/element. You may want to save:

• Name of the design
• Design id
• Custom page properties
• Element metadata

For such use cases, you can use the custom attribute. It is available for all nodes in the store: the store itself, any page, any element.

// set custom data
element.set({
  custom: {
    // optionally, keep previous custom data
    ...element.custom,
    // save new data
    price: 10,
  },
});

// read custom data
// notice that by default element.custom will be null
const price = element.custom?.price;

// also you can save metadata into a page
page.set({
  custom: {
    ...page.custom,
    reference: 'sample',
  },
});

// or into store
store.set({
  custom: {
    productId: 'some-id',
  },
});

custom must be an object {}. You can write any data into that object. Polotno never uses it for rendering, so it is under your control. By default, custom will be null, so when you read some data from custom, make sure it is defined.

The custom attribute is included in JSON export via store.toJSON(), making it perfect for saving metadata that travels with your design templates.

Use Cases

• Template variables: Store variable names for dynamic template generation
• Design metadata: Save author, version, or creation date
• Element IDs: Track external database references
• QR code data: Store encoded content for QR code elements