Up next in 10
Build a React.js PDF Viewer & Form Editor to Annotate & Add Fields in PDF Using PDF-LIB & jsPDF
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-react-js-pdf-viewer-form-editor-to-annotate-add-fields-in-pdf-using-pdf-lib-jspdf/
Show More Show Less View Video Transcript
0:03
Uh hi guys, today in this tutorial I
0:06
will basically show you a ReactJS PDF
0:08
editor and uh viewer I will be
0:11
developing inside uh ReactJS using PDF
0:15
lib and JSPDF library. So this is a live
0:18
demo that you are seeing right here on
0:19
your screen guys. So we have a PDF
0:21
document right here. So whenever you
0:23
load your application guys, so basically
0:25
this uh PDF document will be loaded
0:27
right here and uh the page numbering you
0:30
can see guys this is the first page the
0:32
second page and all the controls are
0:34
there to basically zoom out zoom in. So
0:37
these are all the controls out there.
0:39
You can see the page number we we can
0:41
navigate to the second page third page.
0:43
So all these controls are available
0:45
guys. So you can see we have built this
0:47
editor and this is a complete web
0:49
application which is built inside react.
0:51
So it is you can see we are running this
0:52
on local host 3000
0:55
in the browser. So all the controls are
0:57
there guys. So it's annotator it can be
1:00
used to annotate PDF documents
1:02
watermark. You can crop the PDF
1:04
documents as image files. Let me show
1:07
you the demo of all the features. So
1:09
first of all I will go to the annotate
1:11
feature guys. So we have the feature to
1:14
actually underline text here. We can
1:16
underline text here like this. You can
1:19
see this is useful for underlining. We
1:22
can delete that. And now we have free
1:25
text tool here. So here we can add some
1:27
text to this PDF document. And uh we can
1:30
basically change the font of this text.
1:32
We can have various fonts to choose
1:35
from. We can even bold this text
1:37
itallic, underline and uh strike through
1:40
as well. So all these things are
1:41
available. We can also change the size
1:43
of the text as well. You can see that
1:45
how easy it is. Basically we can
1:47
navigate just place it anywhere else on
1:50
the screen in the PDF document and uh we
1:54
can basically link it to a URL as well.
1:57
So the styling you can see that guys
1:59
basically you can align this on center
2:02
position left position and align in the
2:05
middle bottom all that stuff is there
2:08
and uh we can even change the color of
2:09
the text guys. So it typically
2:13
uh we can change this you can add a new
2:17
color as well.
2:20
Okay. So you can remove this color.
2:27
You can see that we can this is opacity.
2:29
We can control opacity of the text. We
2:32
can also control the we can add border
2:34
as well to the text here. So all these
2:37
borders are possible guys. You will see
2:39
that now this is the border which is
2:41
added to the text right here. You can
2:43
see that.
2:45
So all these things uh we have a delete
2:47
button here. If you want to delete
2:48
something, you can delete this right
2:50
here. So very simple. And then we have
2:52
freehand highlight feature as well. We
2:54
can uh basically highlight something on
2:56
the PDF document. Let's suppose you want
2:58
to highlight something right here. We
3:00
can also highlight like this. We can
3:03
change the color as well of the
3:04
highlighting feature. You will see that.
3:07
So
3:08
you can change the color. Let's suppose
3:10
I want to change it to black color. You
3:12
can go to any uh paragraph. You can
3:15
highlight this text right here in the
3:16
PDF document. So this is annotation
3:18
guys. If you don't know about
3:20
annotation, basically annotation means
3:21
that you are basically highlighting some
3:23
text inside your PDF document. So this
3:25
is meant by that. And uh then all these
3:29
tools are available. It's a complete
3:31
editor that I basically uh built guys.
3:34
We can even strike through the text as
3:36
well like this. If you want to annotate,
3:39
highlight the text like this, you can
3:41
also do this also. Then we have insert
3:44
text some you can also insert some text
3:47
as well. Then we have uh you can uh also
3:52
draw some shapes as well inside the PDF
3:55
document. Arrows as well like this you
3:58
will see. We can also add arrows as
4:00
well. We can add uh rectangular shapes.
4:02
If you want to add rectangular shapes,
4:05
we can add these zigzag lines here. You
4:08
can see that it's very much possible.
4:11
All these shapes are possible guys. You
4:13
can change the colors as well. So, it's
4:16
a very good thing. And then basically
4:19
guys uh if you
4:23
want to
4:25
basically
4:27
uh go want to digitally sign your
4:29
document then we have also the stamps as
4:32
well. So there there are pre-built
4:34
stamps which are available guys which is
4:36
expired. These are the pre-built uh
4:38
stamps which are available. You can
4:40
rotate it like this. You can see that uh
4:44
basically
4:47
we can uh edit the styles here. We can
4:49
increase the opacity or decrease the
4:51
opacity. We can change the size here.
4:54
This is very much useful guys if you
4:55
want to basically add a watermark.
4:59
Uh we can
5:04
you can see that. So you can control
5:07
basically everything by going to style.
5:11
So these are pre-built uh things which
5:13
are there. You can add this watermark.
5:16
So all these stamps are available
5:18
expired uh approved uh completed,
5:21
confidential, departmental and we can
5:23
even add your custom stamp as well. So
5:25
click on that and we can change
5:27
basically we have own your we have your
5:29
own stamp as well. We can edit that. We
5:31
can change the font as well like this.
5:34
We can also change the color of the
5:36
stamp as well background color. All
5:38
these things you can customize guys. If
5:40
you don't want to show username or date
5:42
or time, you can have your own stamp as
5:45
well. So click on create and now this is
5:47
your stamp guys. So basically you can
5:49
rotate that.
5:52
You can change the size as well. So
5:55
everything you can control guys. So
5:58
here you can even control the opacity.
6:00
So you can create your own stamps as
6:02
well guys. So this is really cool little
6:04
stuff guys. So I built this application
6:06
using PDF lib and JSPDF library. If you
6:09
need to purchase this editor guys the
6:11
link is given in the description of the
6:13
video. You can directly go to st PayPal
6:15
and make the payment in United State
6:17
dollar or you can go to stripe.com and
6:19
make the payment in uh Indian rupees and
6:22
all the links are given payment links
6:24
are given. After you make the payment
6:26
guys, you will get this uh ReactJS
6:28
project and uh basically in the files
6:30
panel, whatever PDF document that you
6:33
need to edit, you just need to place
6:35
this uh PDF document that you are
6:37
currently editing in the files folder. I
6:39
am editing this PDF document. So
6:41
basically just place it and just run
6:43
npmi and then run npm start. So this
6:47
will start your project guys. You will
6:48
see I'm running this project on
6:50
localhost 3000. So my project is running
6:53
right here. So after you make the
6:55
payment guys, you will get the zip file
6:56
which will contain the ReactJS project
6:58
for this awesome little editor. And also
7:02
guys uh if you want to add some
7:05
signature digitally signature, we can
7:08
even draw our own signature like this
7:10
guys. And uh we can change the signature
7:13
color as well. We can add styles as
7:15
well. Click on create and then you can
7:17
place your signature guys anywhere on
7:19
the screen.
7:27
You can see how easy it is. So we can
7:30
just paste this signature anywhere like
7:33
this and we can basically uh if you want
7:37
to add uh a
7:41
you can add this uh so you can see that.
7:45
So
7:48
so you can basically change the color of
7:50
the signature like this. So this color
7:52
picker is there and uh
7:56
we can upload our own images as well
7:58
guys from your computer. If you want to
8:00
add images, you can also add images
8:04
inside your PDF document. So this is
8:07
really simple stuff guys. You can even
8:09
basically
8:10
uh
8:14
uh embed it im your own images as well
8:16
like this.
8:19
Just upload your own image files which
8:21
will contain you can see that. So we can
8:24
add image files as well inside this
8:26
editor. So now comes the
8:32
we have the panel here and in the left
8:34
hand side you will see guys basically
8:38
uh we can select the page number. This
8:41
is the first page number. If you want to
8:43
delete this page guys you can click
8:44
delete. Are you sure you want to delete
8:46
the selected pages? You can also delete
8:48
the certain page in the PDF document. So
8:51
now only two pages are remaining in the
8:53
PDF document. You will see that guys. We
8:55
can zoom that. We can all that stuff.
8:56
You can do that. So it's a complete
8:58
editor guys and uh
9:03
we can uh save our downloaded uh
9:06
basically edited file. So now this is
9:09
all the modification that you performed.
9:11
it is currently saved inside the uh
9:14
output file that you
9:17
only two pages are there because the
9:18
third page was removed. So this is a
9:21
nice little feature guys and uh uh in
9:24
the menu you can see that. So you can
9:27
also print the certain page here. There
9:30
are all the controls are there. You can
9:31
print the current page, current view,
9:33
specify pages, print the grayscale, you
9:35
can print change the print quality high
9:38
to you can even add a watermark as well.
9:40
Simply add a watermark to your P PDF
9:43
document like this. You can also change
9:46
the uh font size as well. The size of
9:50
the text. You can also control the
9:51
opacity here like this. And you can make
9:54
your bold everything you can control.
9:57
You can change the text of the
9:58
watermark. Change the opacity here.
10:01
Click on add. So here guys uh basically
10:05
after printing your uh basically your
10:08
watermark will be added right here. So
10:10
this is really simple guys. It's a very
10:12
good editor that I developed in ReactJS.
10:15
If you need this, you can go to the
10:16
description. You can have a light mode
10:18
as well guys. If you're working in
10:20
morning, if you are working in night, we
10:22
also have a dark mode as well. So all
10:24
these features are available.
10:27
This is a panel. Then we comes uh is the
10:30
cropping part guys. Basically, if you
10:32
want to crop a certain page,
10:35
so we can crop a certain page guys. So
10:38
we have a crop page tool right here. So
10:40
if I want to crop this portion of this
10:43
PDF doc PDF page. So I can simply say
10:46
current page and click on apply. So this
10:49
action will per permanently crop all the
10:51
selected pages. So now guys you will see
10:54
your per your PDF page was successfully
10:56
cropped right here. So in this way you
10:59
can crop your section of the PDF
11:01
document. So this is also supported by
11:03
that. Then comes the sniping tool guys.
11:05
So sniping tool is used to take the
11:07
screenshot of a particular. So now we
11:10
can basically download a screenshot.
11:12
Click on and now this converted into
11:14
PNG. So we have basically taken a
11:17
screenshot of a particular particular
11:18
PDF page. We can this with the help of
11:21
this you can basically create just take
11:23
a screenshot of a particular PDF page
11:26
here and click on apply. So this will
11:30
create a image file of that particular
11:32
portion that you selected. So this is
11:34
the sniping tool and then we have also
11:36
the form tool as well guys. We can even
11:39
add fields as well. Form fields you can
11:41
see this basically you can control the
11:44
texting. You can all control the sizing.
11:48
So these are form fields guys where user
11:50
can fill out information
11:53
and uh we have also cross field. We also
11:57
have the right field. All these features
12:00
are there. Dot symbol is also there.
12:02
calendar. You can even embed the
12:03
calendar and uh forms when this comes
12:08
the form here. So various fields are
12:10
there. Uh a simple text field is also
12:13
supported guys. You can basically add a
12:15
text field right here and various
12:18
validators are there. It's a multi-line
12:21
or required. You can control the sizing
12:23
of this all that stuff. Click on okay.
12:27
So now you can basically fill out
12:29
information. It's a form field. So it's
12:32
a very much useful guys if you are
12:33
basically creating forms inside PDF
12:35
document it's a very good uh thing
12:38
checkbox you can basically add a
12:40
checkbox required and uh
12:46
so now you can it's a checkbox
12:54
you can see it's a field type checkbox
12:56
box.
13:02
Then we have uh radio button field guys.
13:05
This is radio button. You can see that.
13:11
So it's a advanced editor guys. So list
13:14
pause field is also there. You can have
13:16
multiple multiple select fields as well.
13:19
Right here
13:22
you can have some options
13:26
you can add multiple options here.
13:31
So there are three options right here.
13:33
You will see that. So
13:37
we can even add combo box as well.
13:41
So so all these fields are there. Uh I'm
13:43
not perfectly uh efficient in designing
13:46
PDF document guys. So if you are a
13:48
proficient uh if you want to get this
13:51
software you can go to the description
13:53
guys complete editor which works in the
13:55
browser. So I'm running it on local host
13:58
3000. You can even embed this on a real
14:01
website as well and earn a lot of
14:02
revenue from AdSense and ISOIC as well.
14:05
So this is basically a hand tool.
14:07
Basically you can control everything and
14:10
uh this is select field select tool you
14:13
can select everything. So
14:18
say double page layout page by page
14:21
rotate clockwise counterclockwise. So
14:23
all these things you can uh do this
14:25
single page covering page enter full
14:28
screen. So
14:30
all these things are there guys. So
14:34
perform it's a fully flesh editor guys.
14:37
So hopefully you will like this demo.
14:40
The link is given guys of the full
14:42
project. You can purchase the source
14:43
code alongside with the full live demo
14:46
and uh the links are given. You can go
14:48
to PayPal make the payment in United
14:50
State dollar or stripe in Indian rupees
14:53
and I will make uh just give you full
14:55
support after the payment if you have
14:56
any sort of issues. Thank you very much
14:59
guys for watching this live stream and I
15:01
will be seeing you in the next one.