Up next in 10
Build a Canva PDF Editor to Annotate & Edit PDF in Browser Using PDF-LIB in HTML & Javascript
Jun 24, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-pdf-editor-to-annotate-edit-pdf-in-browser-using-pdf-js-pdf-lib-in-html-javascript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:01
uh hello guys welcome to this video so
0:04
in this video I will show you a new tool
0:06
that I deployed on my website
0:08
freetools.com
0:10
uh which lets you edit your PDF files
0:12
directly in the browser similar to Canva
0:15
it also have a PDF editor tool so it's a
0:18
ultimate PDF editor uh so you can check
0:21
out this tool here first of all uh here
0:24
you will select your PDF file either you
0:27
can drag and drop or simply click on
0:29
this to select the PDF file here and as
0:33
soon as you select the PDF file you will
0:35
see the live preview of the PDF file
0:37
here it will display the pages here we
0:41
have different controls the previous
0:43
page the next page you can navigate to
0:45
the next page here and then on the left
0:47
hand side you see a bunch of controls
0:49
here we can add text images we can
0:52
annotate highlight we can blur out
0:54
specific portions in the PDF we can hide
0:57
elements as well so as you click the add
0:59
text tool here you will see it will
1:03
display some properties regarding it you
1:05
can add the text here inside this input
1:09
field you can control the phone size
1:12
phone family the color of the text as
1:14
well
1:16
after that you simply click at whichever
1:19
location that you want to add so as I
1:22
you can see the text will be
1:24
automatically added so this is your
1:26
watermark
1:27
let me navigate to the next page
1:36
again click on the text will be added so
1:41
on both of the pages the text has been
1:43
added now we also have the download PDF
1:46
button so if you click the download PDF
1:48
will see automatically the changes will
1:51
be reflected back and uh on both the
1:53
pages the text has been added such as
1:56
the watermark it's very easy to do this
2:00
and uh now if you want to
2:03
use the select tool you can do that as
2:06
well very easily this is your select
2:08
tool
2:11
and then if you want to highlight
2:12
something you basically select this
2:15
highlight tool and then you you can
2:17
change the color of the highlighting
2:20
just pick the color from this color
2:22
picker and then you simply use your use
2:25
your mouse to highlight specific
2:27
portions of the text
2:30
you change the color once again
2:36
like this
2:41
so it's very easy again click download
2:43
PDF to modifi uh you can see all the
2:47
changes have been reflected back you can
2:49
even add images as well we also have a
2:52
button add image so now you can select a
2:58
actual image file that you want to
3:02
put inside this PDF
3:06
now just select the location so I want
3:08
to put this image right here
3:12
right here and then click again download
3:14
PDF so all the changes will be reflected
3:16
back so you can try this tool and the
3:19
tool is built entirely inside HTML CSS
3:22
and JavaScript and uh if you need the
3:25
full source code of this tool the link
3:27
is given in the description you can
3:28
directly purchase it after purchasing it
3:31
you will get this zip file uh which will
3:33
only contains the single index.html file
3:37
so it's entirely built inside the
3:39
browser and it's almost you can see
3:42
1,123
3:45
lines of code so once you get the source
3:48
code it's very easy to see how I coded
3:50
this you can easily modify the source
3:52
code or add additional features as well
3:54
and it's using two open-source libraries
3:56
which are PDF lip which is a JavaScript
4:00
library for editing your PDF files
4:03
directly in the browser this is their
4:05
official website and secondly we are
4:08
using the PDFJS library which is a PDF
4:13
reader library developed by Mozilla so
4:16
we are using these two open-source
4:18
libraries for building this ultimate PDF
4:21
editor so before purchasing it at the
4:23
checkout page I've given the demo link
4:25
you can try this actual PDF editor if
4:28
you are interested then you can actually
4:30
purchase it
4:32
and we also have the blur tool as well
4:35
to actually blur out specific portions
4:37
of the PDFs you can see that it blurs
4:41
out
4:44
using your mouse you can easily do this
4:47
and then we also have the hide tool as
4:50
well so if you want to hide something
4:52
let's suppose this you can see it will
4:54
add a black background so now the people
4:57
can't see
5:00
so again click download PDF tool so it's
5:04
very easy to edit your PDF file guys
5:06
using this ultimate PDF editor tool
5:09
similar to Canva so if you are
5:11
interested the link is given in the
5:13
description you will get this full
5:16
index.html file here worth 1100 lines of
5:20
code here it directly runs in the
5:22
browser you can directly run this
5:24
locally as well you can see now we are
5:26
running it locally here localhost again
5:30
you repeat the process and uh you can
5:33
pick any file here which contains as
5:35
many pages so now this file contains 23
5:38
pages so we have you can go to any page
5:41
in the PDF and edit something
5:45
add text image everything
5:49
so thank you very much for watching this
5:51
uh video
5:53
and I will be seeing you in the next one