Showing focus ring around read-only annotations

Q: How can I show a focus ring around annotations that are read-only?

A: PSPDFKit for Web 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 will not be shown. If you still want to show a focus ring when the user clicks on 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 PSPDFKit.load({
  customRenderers: {
    Annotation({annotation}) {
      const node = document.createElement("div");
      node.dataset.annotationId =; = `
        width: 100%;
        height: 100%;
        pointer-events: all;

      return {
        append: true

instance.contentDocument.addEventListener("click", event => {
  if ( != null) {
    const annotationId =;
    const annotation = instance.contentDocument.querySelector(

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

You can find out more information about custom renderers in our guide article.