Up next in 10
Build a Canva Clone PDF Editor Using PDF-LIB to Annotate & Edit PDFs in the Browser HTML/JS
Mar 13, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-clone-pdf-editor-using-pdf-lib-to-annotate-edit-pdfs-in-the-browser-html-js/
Show More Show Less View Video Transcript
0:00
Uh hello guys, in this video I'll show
0:02
you a Canva clone PDF uh 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're
0:12
running this application on local host.
0:14
So this is the complete source code. We
0:16
have used two external libraries PDF lib
0:19
and PDFJS of Mozilla for building this.
0:22
It's entirely browser based. It's a
0:25
single file that you will get after you
0:26
make the payment. I have given the
0:29
purchase link in the description of the
0:30
video. So almost 1,200 lines of code is
0:33
there. So now let me walk you through of
0:36
the 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:46
So
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:54
number. So
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:05
it accordingly.
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:29
highlighting.
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 also
1:43
have a button for blurring some text. So
1:47
if you don't want to show anything in
1:49
PDF, you click the blur text button and
1:52
you blur out anything. You can see that
1:54
now the text is not visible.
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. Here
2:14
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:34
well.
2:36
So
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 Mozilla 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
3:15
browser.