0:00
Uh hello guys, in this video I'll show
0:02
you a Canva clone PDF editor that I
0:06
developed directly in the browser which
0:08
can annotate and edit your PDF files
0:10
directly in the browser. So we running
0:12
this application on local host. So this
0:15
is the complete source code. We have
0:16
used two external libraries PDF lib and
0:19
PDFJS of Mozilla for building this. It's
0:22
entirely browser based. It's a single
0:25
file that you will get after you make
0:27
the payment. I have given the purchase
0:29
link in the description of the video. So
0:31
almost 1200 lines of code is there. So
0:34
now let me walk you through of the
0:36
application. So it's a simple PDF
0:38
editor. So right here you drag and drop
0:40
your PDF file here. Whichever PDF file
0:42
you are working here.
0:47
after you select your PDF file, a live
0:50
preview will be shown to you on the
0:51
right hand side. You can go to any page
0:58
now we have a set of options right here.
1:00
We can add some text. So here if you
1:03
click the add text button, you can place
1:07
You can even change the phone size,
1:11
color of the text as well. You can
1:12
change it. Then you also have the option
1:15
to highlight something, annotate
1:17
something. So we have this button here.
1:19
So once you click this, you can even
1:21
change the color of highlighting as
1:23
well. So from the color picker it's very
1:25
easy. You simply highlight the text, go
1:27
to the next page, again do your
1:31
Then we also have the button for adding
1:33
image. So you click add image. You have
1:35
the support for selecting a image file
1:37
as well. So you can select the image
1:40
file. Then the very nice feature, we
1:43
also have a button for blurring some
1:46
text. So if you don't want to show
1:48
anything in PDF, you click the blur text
1:51
button and you blur out anything. You
1:54
can see that now the text is not
1:58
You simply select the text whichever
2:00
text you want to hide. You can simply
2:02
blur out the text here. After you make
2:05
the changes, we have this download PDF
2:07
button right here. You click the button
2:09
and after all your changes will be
2:12
reflected back in the output file. And
2:14
here you can see all the two pages are
2:15
successfully edited. So this is a very
2:18
awesome tool. Uh it's completely browser
2:21
based. No uh uh back end is required for
2:24
this. You simply purchase it. After
2:26
purchasing it, you can simply run this
2:28
application locally inside VS Code. It's
2:32
very easy to deploy the application as
2:38
if you are interested I have given the
2:42
purchase link in the description of the
2:44
video. So we have used two libraries for
2:46
this. First of all the Mosilla PDFJS
2:48
library which is a PDF renderer PDF
2:52
viewer library and then we also used PDF
2:55
lip which is a very awesome library for
2:59
creating and modifying PDF documents
3:01
directly in the browser. So we have used
3:04
these two libraries here.
3:07
So I have given the link. So if you are
3:09
interested, you can purchase this Canva
3:11
clone like uh PDF editor directly in the
