# Annotate PDF on load in reactJS

**URL:** <https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944>\
**Category:** Technical Support\
**Created:** [August 11, 2021, 12:13pm UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944 "2021-08-11T12:13:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![utkarsh.shrivastav](https://avatars.discourse-cdn.com/v4/letter/u/ecb155/32.png) [@utkarsh.shrivastav](https://pdfjs.community/u/utkarsh.shrivastav)\
**Post date:** [August 11, 2021, 12:13pm UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944/1 "2021-08-11T12:13:39Z")

</div>

For annotating the pdf part, I have the coordinates. I want to annotate automatically the pdf as soon as it loads.  
How shall we proceed to achieve this task

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [August 11, 2021, 12:13pm UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944/2 "2021-08-11T12:13:44Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [API for Annotating PDFs With PDF.js Express](https://pdfjs.express/documentation/annotation/api)
- [Create image stamp annotations in PDF.js Express](https://pdfjs.express/documentation/annotation/create-annotation-stamp)
- [Create free text annotations in PDF.js Express](https://pdfjs.express/documentation/annotation/create-annotation-free-text)

APIs:
- [CoreControls.BlackBoxAnnotationManager - preloadAnnotations(An)](https://pdfjs.express/api/CoreControls.BlackBoxAnnotationManager.html#preloadAnnotations__anchor)
- [Tools](https://pdfjs.express/api/Tools.html#__anchor)
- [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor)

Forums:
- [How to delete highlight annotation from pdf with pdf js express in react](https://pdfjs.community/t/how-to-delete-highlight-annotation-from-pdf-with-pdf-js-express-in-react/379/4)
- [Integrate PDF.JS Express in Salesforce Lightning Component](https://pdfjs.community/t/integrate-pdf-js-express-in-salesforce-lightning-component/442/1)
- [How can I add a spinner or a loader after performing annotations on pdf?](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377/3)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 11, 2021, 3:38pm UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944/3 "2021-08-11T15:38:01Z")

</div>

Hi there,

Please refer to the documentation and samples [here](https://pdfjs.express/documentation/annotation/create-annotations).

Thank you,  
Logan

---

<div class="post-metadata">

**Author:** ![utkarsh.shrivastav](https://avatars.discourse-cdn.com/v4/letter/u/ecb155/32.png) [@utkarsh.shrivastav](https://pdfjs.community/u/utkarsh.shrivastav)\
**Post date:** [August 12, 2021, 3:57am UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944/4 "2021-08-12T03:57:52Z")

</div>

Hi Logan,

thanks for the doc. what is the procedure if we want to load multiple annotations on different pages.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 13, 2021, 4:21pm UTC](https://pdfjs.community/t/annotate-pdf-on-load-in-reactjs/944/5 "2021-08-13T16:21:35Z")

</div>

Hi,

It is the same procedure, just set the `PageNumber` attribute on the annotation you are creating to the page you want the annotation to appear on.

Logan