This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/knowledge-base/show-focus-ring-read-only.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Show focus ring on read-only PDF annotations | Nutrient

Show focus ring on read-only PDF annotations | Nutrient

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

Nutrient Web SDK only shows a selection outline around annotations that are editable and can be moved/resized. If an annotation is made read-only using isEditableAnnotation or editableAnnotationTypes, this outline won’t be shown. If you still want to show a focus ring when the user clicks a read-only annotation, you can work around this by using custom renderers to create a clickable area on top of the annotation and setting focus in the click handler:

const instance = await NutrientViewer.load({
  customRenderers: {
    Annotation({ annotation }) {
      const node = document.createElement("div");
      node.dataset.annotationId = annotation.id;
      node.style.cssText = `
        width: 100%;
        height: 100%;
        pointer-events: all;
      `;


      return {
        node,
        append: true
      };
    }
  }
});


instance.contentDocument.addEventListener("click", (event) => {
  if (event.target.dataset.annotationId != null) {
    const annotationId = event.target.dataset.annotationId;
    const annotation = instance.contentDocument.querySelector(
      `.PSPDFKit-Annotation[data-annotation-id="${annotationId}"]`
    );


    annotation.setAttribute("data-focusvisible-polyfill", true);
    annotation.focus();
  }
});

You can find out more information about custom renderers in the annotation customization guide.