0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to
0:04
build out a drag and drop Canva clone
0:06
PDF editor directly in browser. So
0:09
actually editing your PDF files directly
0:11
in browser. So this is actually the
0:13
application that I developed entirely
0:15
inside browser using HTML, CSS and
0:18
JavaScript. I have given the link you
0:20
can directly purchase this source code.
0:22
This is a single index html file as you
0:25
can see about 20 2200 lines of code
0:30
here. So it's a single file which
0:31
directly runs in the browser. So it's a
0:34
single static web application. So it's a
0:37
similar to drag and drop canv
0:41
editor. So here you will select your
0:44
first of all your PDF file whatever PDF
0:46
file you want to select.
0:52
So after selecting the PDF file, the
0:55
file will display here with live
0:57
preview. All the pages will be there. So
0:59
you will be able to individually
1:02
uh be able to edit the PDF. So we have a
1:05
quite a number of uh tools out there for
1:08
annotating highlighting the PDF here. So
1:10
you select the pen operator. So simply
1:13
you can select the PDF here. You can
1:16
highlight anything right here using
1:18
this. You also have the capability to
1:20
change the color using the color picker.
1:22
So change the color here and you can
1:25
just see how easy it is. You can even
1:27
change the stroke level as well. And
1:30
then you can go to the next page, do the
1:32
same highlighting. And you also have the
1:35
capability to add text here. So simply
1:37
click on the location where you want to
1:40
add the text here and just add the text
1:42
here. And also you have the capability
1:45
to add images. So you simply select the
1:47
image file whatever image file that you
1:49
want to add and you can place it
1:51
accordingly and after making these
1:53
modification you can click the export
1:55
PDF button to change. So save the
1:57
changes here and you will see the output
1:59
PDF file will be saved here. So if
2:02
you're interested in this Canva clone
2:04
drag and drop PDF editor you can
2:06
purchase the source code. I have given
2:08
the link in the description of the
2:09
video. So it's very easy to modify the
2:12
source code as well. So once you get the
2:14
source code, you can add additional
2:15
features on top of this or add uh you
2:19
can modify the interface as well
2:22
and it's also very easy for you to
2:23
deploy this application. It's just a
2:26
single file here index html. So it's a
2:29
single static web application. So there
2:31
is no backend. All the code is there in
2:34
a single file. So you also have the
2:36
capability to add a blank page as well.
2:39
So simply click and this blank page will
2:41
be added. And now if you want to delete
2:44
this page, you can click the delete page
2:45
button as well. So all these
2:47
modifications you can do. And apart from
2:50
that, we also have this. If you want to
2:53
hide something in PDF, you can click
2:55
this operator which is white out. And
2:58
simply select the portion that you want
3:00
to hide and that portion will be hidden.
3:03
So you can just see how easy it is. It's
3:05
really fast as well. So everything is
3:08
hidden out there. You also have the
3:10
capability to add a comment as well. So
3:13
you can just see here you can add a
3:15
comment as well. And if you want to
3:18
duplicate a page, you can click this
3:20
button here to duplicate the page. So
3:22
everything will be duplicated. So this
3:24
is a Canva clone uh drag and drop PDF
3:28
editor. So if you are interested in
3:31
this, the link is given in the