0:00
Uh hello guys, welcome to this video. So
0:03
in this video, I'll show you a Canva
0:05
clone PDF editor application that I
0:07
developed in ReactJS. I'm just showing
0:09
you the demo right here. So it directly
0:13
executes uh in the browser. It's a
0:15
single page ReactJS application. Canva
0:18
clone PDF editor. So we are running it
0:20
on local host as you can see. So right
0:23
here you will select your PDF file. It
0:25
has this advanced editor where you can
0:28
edit, highlight, annotate your PDF
0:30
files. Once you select your PDF file, it
0:33
will render out. It will view, you can
0:35
read your PDF files directly. So it is
0:38
having total number of pages, previous
0:41
page, next page. Then we have this nice
0:43
little advanced editor. It's entirely
0:46
developed in ReactJS. I've given the
0:48
source code. You can directly purchase
0:50
it. The link is given in the
0:52
description. So after you purchase it,
0:54
you will get actually all the source
0:55
code from Google drive automatically.
0:58
This is in a directory structure. Each
1:00
and every file is divided into its
1:02
appropriate uh TypeScript file here. So
1:04
once you get the source code, you will
1:06
able to modify this and add additional
1:08
features as well. So now I'm just
1:11
running it on local host. As you can
1:13
see, we have started this project npm
1:15
run start. So once the project has
1:18
started so this is you can uh actually
1:22
use these features just click the pencil
1:25
icon and right here you will be able to
1:29
first of all navigate.
1:31
So you can go to the next page like this
1:38
and then if you want to add some text
1:40
you basically you can add this. As you
1:44
can see, we are adding some text right
1:46
here. We can just place it accordingly.
1:49
And we can even change the phone size as
1:53
Just select it and just change the phone
1:58
using the color picker. Change the color
2:00
of the text. And then again
2:04
like this. So you can see how easy it
2:10
So after you add this you can place your
2:13
accordingly. Same goes with images if
2:15
you want to add image in the second
2:17
page. So this is the insert image
2:20
button. So right here you will select
2:23
your image wherever you need to place
2:26
this image. You can change control the
2:29
width height placement
2:32
accordingly. After that uh then we have
2:34
this button of export PDF exporting the
2:38
changes automatically the output file
2:40
will be downloaded. So all the changes
2:42
that you have done such as adding the
2:45
text, highlighting, annotating
2:47
everything is saved. You can see the
2:49
image is also added. This is a complete
2:52
project that I developed in ReactJS. If
2:54
you are interested guys it's a Canva
2:56
clone PDF editor static single page
3:00
application which directly runs in the
3:01
browser. So the link is given in the
3:04
description. So I basically used some
3:06
third party libraries for which is
3:08
fabric js. We have also used pdf lib
3:15
And react we are using the latest
3:17
version. As you can see this is the
3:18
package.json file. So
3:22
pdf lib is a javascript pdf generation
3:26
library. The pdfjs.ist list is once
3:30
again a very famous PDF related library
3:35
and after all we are also using react
3:38
the latest version fabric it's very easy
3:42
to run this locally and also you can
3:43
deploy this build out this project and
3:46
build out to a real domain name as well
3:49
it's very easy to deploy this as well so
3:51
once you get the source code you will be
3:52
able to modify this source code and also
3:56
add additional features is on top of of
4:01
So the application is quite simple. You
4:08
select your PDF file. It uh will render
4:10
out your PDF file where you can read all
4:14
the pages. You have all these basic
4:20
You can navigate to the next page
4:30
change the background color as well.
4:42
So here you can just need to first of
4:45
all select the phone size
4:49
and you can just see we also have the
4:52
ability to insert images. So I've shown
4:54
you the full demo. If you're interested
4:56
the link is given in the description you
4:58
can directly purchase it.
