Annotations

[axeldvp]

Hello,

I would love to use your lib, but I absolutely need annotations.

I can see that you support it here https://www.react-pdf.dev/features. But I don't see any annotations in your documentation.

My final goal is to automatically search and annotate given text when my pdf is loaded. The user should be able to add/remove annotations. I need to access annotations outside of the react-pdf component.

Will it be possible ? Will it be available in a future update ?

Thank you in advance !

[david-reactpdf]

Hello @axeldvp,

Appreciate your interest in React PDF!

React PDF can display annotations from a PDF document. However, it doesn’t currently include a built-in UI tool to add or modify annotations directly on the PDF. That said, it’s something we’re actively considering for the roadmap.

Just to clarify, if we’re able to provide access to annotations that already exist in the PDF file outside of the React PDF component, would that be sufficient for your use case?

[axeldvp]

Thanks for your answer. I understand better now.

My goal is to get all coordinates of annotations, to redact them in the document. In fact annotations is only used to draw black rectangles on the document eventually. I don't apply those annotations to the document itself, you see ?

To be clear :

• I have an array of words ["test1", "test2", "test3"]
• I need to highlight those words on the pdf when the pdf is displayed.
• User should be able to add/remove highlighted words.
• User should be able to draw rectangles
• Highlighted words are displayed outside of the pdf component in a list.
• If user click an item of the list, it scroll the pdf to the highlighted word
• If user click an highlighted word on the pdf, I highlight the item on the outside list

I need to be able to get/set annotations programatically outside of the component.

At the moment, I do all of this with another library, but I'm searching an alternative to it.

[david-reactpdf]

Thank you for the detailed explanation! Very interesting in how you are interacting with a PDF file. Please let me discuss your use case with the internal team and get back to you.

On another note, would you mind sharing which library you are currently using?

[david-reactpdf]

Hi @axeldvp, just want to keep you posted on our discussion. We're planning to add a feature to highlight keywords programmatically in a 1-2 weeks. The feature will also include a respond so you can use the information to further manipulate the outside list. This feature should allow you to do the following:

• I have an array of words ["test1", "test2", "test3"]
• I need to highlight those words on the pdf when the pdf is displayed.
• Highlighted words are displayed outside of the pdf component in a list.
• If user click an item of the list, it scroll the pdf to the highlighted word
• If user click an highlighted word on the pdf, I highlight the item on the outside list

Would this work for you?

At the moment, we're focused on the viewing and rendering experience of PDF document. However, we'll actively consider the annotation tool in the near future.

[joshkay]

I'm also using another library for something very similar to this. Looking for alternatives because it has been abadoned. Is this already possible?

[axeldvp]

Hello @david-reactpdf !

Sorry had a really busy week.

I'm using https://pdfjs.express/

I can't wait to try the new update, seems really cool !

[david-reactpdf]

Hi @axeldvp, just want to keep you posted on our discussion. We're planning to add a feature to highlight keywords programmatically in a 1-2 weeks. The feature will also include a respond so you can use the information to further manipulate the outside list. This feature should allow you to do the following:

• I have an array of words ["test1", "test2", "test3"]
• I need to highlight those words on the pdf when the pdf is displayed.
• Highlighted words are displayed outside of the pdf component in a list.
• If user click an item of the list, it scroll the pdf to the highlighted word
• If user click an highlighted word on the pdf, I highlight the item on the outside list

...

Hi @axeldvp @joshkay, just want to update you that this feature should be ready in 2 weeks. Apology for the delay. Will keep you posted when we've published a beta version so you can test it out.

[axeldvp]

Hey @david-reactpdf

Thanks for keeping me informed !

I would like to add some informations :

• When I search for a keyword in pdf, please let us do regex (I'm searching in OCRed PDF, so sometimes text is not perfect. For exemple if I search for "John Doe", sometimes I have multiple spaces between keywords in my text, so I'm searching using regex to counter this problem.

• If user click an item of the list, it scroll the pdf to the highlighted word. Please also highlight keyword in pdf

• Will you also add "User should be able to draw rectangles" as annotations ?. Those rectangles will be redacted on the final pdf.

Thank you !

[david-reactpdf]

Hi @axeldvp, thank you for the additional information. Please let me clarify further as follows:

• Yes, we're adding a support for regex.

• We're providing the highlight data and location which you can use together with the goToPage function to link to an item from the external list component.

• We're focusing on the viewing and rendering experience of PDF document. At this moment, there is no annotation UI tool that a user can readily use. However, you could programmatically draw bounding boxes to create such "rectangles" on a PDF page.

Thanks again for your feedback!

[axeldvp]

Hello @david-reactpdf, thank you for keeping me updated.

Pretty cool news !

Unfortunately without annotations ui tool, I won't be able to implement this lib.

Actually :

• I automatically draw annotations highlights (for given keywords), and rectangles (when displaying a previously annotated document). This should be ok with your update.
• But users can highlight text by selecting it, and draw rectangles by themselves. Because sometimes they need to hide more text. And sometimes they want to hide images for exemple.

Hoping to see this feature in a future release !

[david-reactpdf]

Hi @axeldvp, thank you for the additional explanation. I totally understand and we're sorry for not being able to address your requirements at this moment. However, we plan to add an annotation ui tool in the future. I'll be sure to keep you posted when there is a more concrete timeline!

[david-reactpdf]

Hi @axeldvp, @joshkay, I want to update that we've roll out a feature to highlight keywords programmatically with different colors in the new version. Although it may not meet all of your requirements, please feel free to try. All feedbacks are much appreciated!