How to save and load a custom property on an annotation?

The recommended way is to use the setCustomData function on annotations.

const myCustomAttributeValue = 'some custom data';
myAnnotation.setCustomData('myCustomAttribute', myCustomAttributeValue);

When the PDF is downloaded this data will also be embedded inside the PDF and if you re-open the PDF in WebViewer it will be accessible through the getCustomData function.

const myCustomAttributeValue = myAnnotation.getCustomData('myCustomAttribute');

Alternatively you can use the setCustomSerializeHandler and setCustomDeserializeHandler APIs, however note that saving an attribute this way will only work if you load XFDF separately from the PDF. If you download the PDF the attribute will not be preserved.

const { Annotations } = instance.Core.Annotations;

Annotations.setCustomSerializeHandler(Annotations.Annotation, function(element, pageMatrix, options) {
  options.originalSerialize(element, pageMatrix);
  if (options.annotation.myCustomAttribute) {
    element.setAttribute('attribute-name', options.annotation.myCustomAttribute);
  }
  return element;
});

Annotations.setCustomDeserializeHandler(Annotations.Annotation, function(element, pageMatrix, options) {
  options.originalDeserialize(element, pageMatrix);
  options.annotation.myCustomAttribute = element.getAttribute('attribute-name');
});