Up next in 10
Build a React.js Canva Clone PDF Editor Clone in Browser Using PDF-LIB & PDF.js in TypeScript
Feb 26, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-clone-pdf-editor-clone-in-browser-using-pdf-lib-pdf-js-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys. In this video, I'll show
0:02
you I built out a ReactJS Canva clone
0:05
PDF editor directly inside browser. It's
0:09
it can be used to edit your PDFs
0:11
directly in browser. So we are running
0:13
this on localhost 3000. The interface is
0:16
quite simple. you actually select
0:19
whatever PDF file you want to edit
0:25
and as soon as you select your PDF file
0:31
the PDF file will load right here you
0:33
will see that
0:41
and it will be displayed you will be
0:42
able to read the PDF file we have all
0:44
the controls zooming in zooming out. So
0:47
we have the pages here. This is the
0:49
first page. You can go to the n navigate
0:51
to the second page as well. And then we
0:54
have these controls. You can switch to
0:56
dark theme as well. So if you need this
0:59
editor uh the source code, the link is
1:01
given. You can directly purchase the
1:02
source code. So this is I written this
1:06
from scratch. So this is actually the
1:08
full directory structure. All the files
1:10
are customizable. So it's coded directly
1:13
inside TypeScript. So it will be easy
1:15
for you to customize this. Once you
1:17
purchase the source code, you will be
1:18
able to see how I coded this. So you
1:22
will see we are running this project
1:23
locally as you can see uh npm rundev.
1:27
This has started the local development
1:28
server and it's also easy for you to
1:31
deploy this as well. So simply running
1:33
the command npm run build, this will
1:36
deploy the application. So coming back
1:38
to the application, it's really simple.
1:40
So once you select a PDF file similar to
1:43
Canva PDF editor you will be able to add
1:46
text simply select the widget and right
1:50
here
1:51
wherever you need to add the text simply
1:54
add the text.
1:56
You can even change the color as well by
1:58
choosing this color picker and changing
2:01
the color of the text as well.
2:05
This is a pen tool. So you basically
2:07
make the modification. Go to the next
2:09
page. Do the same thing. Just
2:13
having the modification. You can change
2:15
the color as well.
2:17
Just annotate, highlight everything you
2:19
want to do. And then you have the button
2:22
of exporting the PDF. So once you done
2:26
done your modifications, you can export
2:28
your PDF file. So you will see all the
2:30
changes that you have done, it's
2:32
successfully reflected back in the
2:33
output file. We have these
2:37
the PDF is successfully modified. So you
2:41
don't need any fancy software. You can
2:43
purchase this and directly edit your PDF
2:45
files directly in the browser. Same you
2:48
can also draw your own signature as
2:51
well. You will see digital you can
2:54
digitally sign your PDF files
2:57
and uh embed your signatures.
3:02
You also have the ability to embed
3:05
images. So which is really easy for you
3:07
to do this.
3:11
So once you select the image from the
3:13
local file system, you can embed that
3:16
image. Just place it accordingly
3:18
wherever you need to adjust the size as
3:20
well. So just adjust it.
3:25
This is the signature that I already
3:27
showed you. So
3:33
then we have this pen tool
3:36
for annotating, highlighting, anything
3:38
right here.
3:42
And then lastly, we have this tool here
3:44
for eraser. So if you want to erase
3:46
something in the PDF, you can do this as
3:48
well. So
3:54
you can also change the size of the text
3:57
as well.
4:06
Can adjust the size here right here.
4:10
So once you're happy again you click the
4:12
export button. Give it a file name and
4:14
then automatically
4:16
the PDF you can see the image is also
4:19
added
4:21
the im the PDF is successfully modified.
4:24
So it's a simple static web application
4:27
which directly runs in the browser. So
4:28
it doesn't have a back end. So it's a
4:31
single single page static application.
4:34
So once you get the source code you will
4:36
be able to easily add more features on
4:40
this or use it. So it's fully
4:43
customizable and it's works on all
4:46
devices, mobile, tablet, desktop. So
4:52
you can easily earn a lot of revenue as
4:55
well by just purchasing a domain name
4:57
and deploying this application and you
4:59
can earn a lot of passive income as
5:01
well. So
5:04
and specifically talking about the
5:05
dependencies we have used uh as you see
5:09
we are using uh
5:12
this Tailwind CSS. We are also using PDF
5:16
lib and PDFJS dist. So these are the two
5:21
libraries that we have used. If you know
5:24
PDF lib is a really popular JavaScript
5:28
library for editing your PDF files. So
5:32
also we have used this library as well
5:34
PDFJS
5:42
which is created by Mosilla PDFJS. So we
5:45
have used these two libraries for this
5:48
project PDF editor. So
5:52
I showed you all the capabilities all
5:54
the features of this. So if you are
5:56
interested in this you can purchase it.
5:58
The link is given in the description. So
6:01
you can add images, text, annotate,
6:04
highlight, insert signatures.
6:08
You can do all all sort of things. So
6:16
So it's using Tailwind CSS as you can
6:18
see for the user interface. I've used
6:20
TypeScript here for the actual language.
6:24
It's a supererset of JavaScript.
6:31
So these are scripts here for running
6:33
this project locally or building out and
6:36
deploying this
6:39
directly runs as you can see.