This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/annotations/customization/hiding-annotations.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Hide PDF annotations using JavaScript | Nutrient Web SDK

Hiding annotations in Nutrient Web SDK

Markdown version of this page, suitable for AI agents and automation

Use the Nutrient Web SDK API to hide annotations. Choose the method that fits your use case.

When you use Nutrient Web SDK with Document Engine, Instant layers can apply your business logic to annotation visibility. Use layers to decide which annotations each user can see. Refer to the instant layers guide.

Hiding individual annotations

To hide an individual annotation, set its noView flag. All annotation types share this flag:

// Hide the first annotation on page 0.
const annotations = await instance.getAnnotations(0);
const annotation = annotations.first();
instance.update(annotation.set("noView", true));

The noView flag hides the annotation from the screen, but it doesn’t prevent printing. Set opacity to 0 to also hide the annotation in printed output:

// Hide the first annotation on page 0 when viewing on the screen and when printing.
const annotations = await instance.getAnnotations(0);
const annotation = annotations.first();
instance.update(annotation.set("opacity", 0));

You can also set noPrint with noView for the same visual result:

// Hide the first annotation on page 0 when viewing on the screen and when printing.
const annotations = await instance.getAnnotations(0);
const annotation = annotations.first();
instance.update(annotation.set("noView", true).set("noPrint", true));

You can’t select annotations with noView or hidden set. Calling setSelectedAnnotations throws the following error for these annotations.

PSPDFKitError: Assertion failed: Annotations with the `noView` or `hidden` flag set cannot be selected.


For further assistance, please go to: https://www.nutrient.io/support/request

The annotation doesn’t appear onscreen, so users have nothing to click on the page. The annotations sidebar still lists the annotation, and selecting it there bypasses the check. To scroll to the annotation without selecting it, pass its page index and bounding box to jumpToRect.

Setting opacity to 0 keeps the annotation selectable. A zero-opacity annotation stays on the page, so a user who clicks its position still selects it. This is visual hiding, not access control. Keep that in mind for business logic for hiding annotations.

Using business logic for hiding annotations

You may need to show specific annotations to specific users based on role. In these cases, use an annotation’s customData property to assign capabilities to user roles:

const delayedAnnotation = annotation
  .set("customData", {
    forUserRoles: ["manager", "editor"]
  })
  .set("opacity", 0);


instance.update(delayedAnnotation);

When you display annotations, filter them by the user’s role:

const annotations = await instance.getAnnotations(0);


const annotationsToUpdate = annotations
  .map((annotation) => {
    const customData = annotation.get("customData");


    if (!customData || !customData.forUserRoles) {
      return;
    }


    if (customData.forUserRoles.includes(currentUser.role)) {
      return annotation.set("opacity", 1);
    }
  })
  .filter(Boolean);


if (annotationsToUpdate.size > 0) {
  instance.update(annotationsToUpdate);
}

With this filter, Nutrient Web SDK displays an annotation only when its forUserRoles array contains currentUser.role.