0:00
Uh hello guys, in this video I show you
0:02
a Canva clone PDF editor or annotator
0:06
that I directly built inside the browser
0:08
to edit or annotate PDF files directly
0:11
in the browser. So I'm running this
0:13
project on local host as you can see. So
0:16
this is the HTML file that you will get
0:18
once you purchase the full source code.
0:20
I've given the demo uh purchase link in
0:23
the description of the video. So this is
0:26
the overall single file here index html.
0:29
So round about 1100 lines of code is
0:36
so once you can directly open it in VS
0:39
code with uh using live. So it's very
0:41
easy to open and deploy it. So once you
0:44
open it the interface will look
0:46
something like this. So first of all you
0:48
select any PDF file that you want to
0:51
edit. So once you select the PDF file
0:54
the the PDF will render it.
0:58
And here you can make changes. You have
1:00
a set of options. You can actually add
1:03
text, images, highlight the text. So now
1:06
for highlighting you can simply
1:09
as you can see we can highlight here
1:14
So here you can basically change the
1:17
color of the highlighting as well.
1:20
So you can just see here. So this is
1:23
page number one. You can go to next page
1:25
again. do your highlighting
1:28
and uh then let's suppose you want to
1:30
add some text here. You can even add
1:33
text as well. Simply click the add text
1:39
simply click on that and your text will
1:41
be added. So multiple times the text
1:44
will be added again and again. So here
1:47
you can even change the phone size. You
1:51
can use the select tool to actually
1:57
so it's very simple. You can even blur
1:59
out something as well using this tool.
2:02
So you can just see here the text has
2:04
been blurred. So this is a blur tool. So
2:07
if you want to blur something, you can
2:08
even do that as well. So we also have
2:12
the button to hide the text. So once you
2:14
click this, you can hide anything.
2:17
You can click this. You can change the
2:19
color of the u highlighting anything you
2:23
can do right here. So all these tools
2:29
and then we can also have the option to
2:41
add images as well. So it's very simple.
2:44
You basically select any image.
2:55
You click the add image button and
2:58
can basically place the image here as
3:02
So after you make the changes you click
3:04
the download PDF button. So everything
3:06
will be exported as you can see all the
3:10
highlighting all the text that you added
3:12
everything has been exported. So if
3:14
you're interested guys uh you can
3:16
directly purchase it. I've given the
3:18
purchase link in the description of the
3:20
video. It's a Canva like editor to
3:23
annotate and edit your PDF files
3:26
directly in the browser. So if you have
3:28
some knowledge about JavaScript you can
3:30
even modify the source code as well and
3:34
And for building this we are using some
3:37
third party libraries which are
3:39
completely open source. The first
3:41
library is PDF lib which is a JavaScript
3:44
library for creating and modify
3:48
And then we are also using Mosilla PDFJS
3:51
library which is a PDF renderer rip
3:53
library. So we are using both these
3:56
libraries for building this canvas style
3:59
PDF editor and annotator.
