ReactJS: How to add annotation indicator on Page thumbnail

WebViewer Version: 8.3.1

Please give a brief summary of your issue:
We want to add an indicator on page thumbnail if signature placeholder added on that page

Please describe your issue and provide steps to reproduce it:
We have added the placeholder on the PDF document for eg. page 1 and 3. Now we want to show the annotation indicator on page thumbnail displayed on LEFT panel on webviewer.

Please provide a link to a minimal sample where the issue is reproducible:
We have attached the image for the reference.

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hello @vtiwari,

Currently we do not have an API that allows this level of customization for the thumbnails. So to implement this kind of feature you have a couple of options.

The first one is to fork our open source repository and customize the Thumbnail component to render with the indicators. You can find the code for the Thumbnail component here..

For more information on how to fork the UI for advanced customization please refer to this guide:

Your second option would be to leverage a built-in browser feature called the MutationObserver. This interface allows you to watch for changes to the DOM tree and perform any modifications you need. Each thumbnail has a unique ID that matches it to the page index, so for example, the thumbnail for Page 1 would be pageThumb0. With this information you can observe when the thumbnail is mutated, and add any additional visual items to the DOM node (such as the little flags to show a signature is required).

Let us know if you have questions about either approach.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.