---
title: "Show focus ring on read-only PDF annotations | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/show-focus-ring-read-only/"
md_url: "https://www.nutrient.io/guides/web/knowledge-base/show-focus-ring-read-only.md"
last_updated: "2026-05-15T19:10:05.088Z"
description: "Learn to display a focus ring around read-only annotations in Nutrient Web SDK by creating custom renderers that enable clickable areas for user interaction."
---

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`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableAnnotation) or [`editableAnnotationTypes`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#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:

```js

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](https://www.nutrient.io/guides/web/annotations/custom-rendered-annotations.md) guide.
---

## Related pages

- [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md)
- [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md)
- [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md)
- [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md)
- [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md)
- [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md)
- [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md)
- [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md)
- [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md)
- [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md)
- [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md)
- [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md)
- [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md)
- [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md)
- [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md)
- [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md)
- [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md)
- [Deselect Text](/guides/web/knowledge-base/deselect-text.md)
- [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md)
- [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md)
- [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md)
- [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md)
- [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md)
- [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md)
- [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md)
- [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md)
- [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md)
- [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md)
- [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md)
- [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md)
- [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md)
- [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md)
- [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md)
- [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md)
- [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md)
- [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md)
- [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md)
- [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md)
- [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md)
- [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md)
- [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md)
- [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md)
- [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md)
- [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md)
- [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md)
- [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md)
- [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md)
- [Link Text](/guides/web/knowledge-base/link-text.md)
- [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md)
- [Overview](/guides/web/knowledge-base/overview.md)
- [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md)
- [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md)
- [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md)
- [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md)
- [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md)
- [Override User Agent](/guides/web/knowledge-base/override-user-agent.md)
- [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md)
- [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md)
- [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md)
- [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md)
- [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md)
- [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md)
- [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md)
- [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md)
- [Read-only forms](/guides/web/knowledge-base/read-only-forms.md)
- [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md)
- [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md)
- [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md)
- [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md)
- [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md)
- [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md)
- [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md)
- [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md)
- [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md)
- [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md)
- [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md)
- [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md)
- [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md)
- [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md)
- [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)