Up next in 10
Build a PDF Canvas Editor & Viewer in Browser Using PDF.js & PDF-LIB Using HTML5 & Javascript
Jun 19, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-pdf-canvas-editor-viewer-in-browser-using-pdf-js-pdf-lib-using-html5-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:04
uh hello guys uh welcome to this uh live
0:06
stream So in this live stream I'll show
0:08
you a free tool that I deployed on my
0:11
website freemediatools.com
0:13
It's a ultimate PDF editor or you may
0:16
say you can view your PDF files right in
0:18
the browser itself This is actually the
0:21
tool here It's built entirely inside
0:24
HTML CSS and JavaScript
0:26
This is actually the interface of the
0:28
tool So here you will simply select
0:30
whichever PDF file that you want to
0:32
select here So let me just select a PDF
0:35
file here As soon as you select the PDF
0:38
file you will see you will able to read
0:40
your PDF file You can navigate to any
0:44
page in the PDF So it contains two pages
0:46
So on the left hand side you will see a
0:48
short little preview of each page You
0:51
can click the mouse you can navigate to
0:53
the first page second page So in this
0:55
easy way you can read your entire PDF
0:57
document right in the browser itself and
0:59
also it's a editor as well where you can
1:02
edit each page in the PDF document So we
1:05
have a simple interface You just need to
1:07
click at whichever location you want to
1:10
add the text by using mouse and then we
1:13
have this text area where we can enter
1:17
some text
1:19
So you can control the font size You can
1:21
even change the color of the text as
1:23
well So you can pick any color of your
1:25
choice and then we have this button of
1:28
add text As soon as you do this again
1:31
you will see the text will be added
1:33
Again you just select the location and
1:35
then you select whichever color
1:38
and then you add your text You can
1:41
control the phone size
1:44
and then if you want to go to the first
1:46
page again you repeat the process You
1:49
select your text
1:53
select the location and at that location
1:55
the text will be added Once again just
1:58
tap on whichever location you want to
2:00
add the text After that you just write
2:02
the text here Select the phone size and
2:05
just select whichever color that you
2:07
want to add the text After that click
2:10
add text After you uh made the
2:13
modifications in the PDF file you have
2:15
the button of saving this modifications
2:18
into a new PDF file So as soon as you
2:20
click the save button you will now see a
2:23
new PDF file is downloaded in the
2:25
browser and you can see all your changes
2:28
have been reflected back So this is a
2:30
project that I developed inside HTML and
2:32
JavaScript It's a single single page
2:36
application
2:37
So I have also deployed this on my
2:39
website freemediatools.com
2:42
So you can purchase the full source code
2:45
of this So it's a single page
2:47
application You will see index.html
2:49
After you purchase it you will be
2:50
redirected to Google Drive And
2:53
almost,000 lines of code is there You
2:56
will see And this is exactly your it
3:01
contains CSS JavaScript and HTML code
3:05
So once you purchase it you will get
3:07
this zip file inside that you will get
3:09
this index html You can simply run this
3:12
locally by
3:14
running it inside your VS code locally
3:17
So you can see we are running it locally
3:18
here So once you get the source code you
3:21
will get to know about how I use this
3:23
libraries to build this editor Again you
3:26
simply select the PDF file Just select
3:28
the location and then you can add the
3:30
text Navigate to any page
3:34
Can change the color You can change the
3:36
phone size as well
3:38
And then you can click the save button
3:41
and you will see
3:44
the file will be downloaded
3:47
And uh if you need the full source code
3:50
the link is given in the description At
3:52
the checkout page I have also given the
3:54
demo link So before purchasing it you
3:56
can try out this tool on my website
3:58
freemediatools.com
4:00
and for building this we have used two
4:02
libraries uh PDFJS which is a
4:05
open-source library Mosilla PDFJS which
4:09
is a general purpose libraries for
4:12
viewing your PDF files right in the
4:14
browser itself and secondly for editing
4:17
the PDF files we using PDF lib which is
4:20
again a open-source JavaScript library
4:23
for editing your PDF files right in the
4:26
browser itself So we are using these two
4:28
libraries for building this application
4:30
So if you are interested in purchasing
4:32
the full source code the link is given
4:34
in the description
4:37
Uh after purchase you will get this
4:39
index html file here
4:43
So it's very simple to deploy this as
4:45
well You can also be able to modify the
4:48
source code or add additional features
4:50
as well So once you get the source code
4:53
so it's a single page application it
4:55
looks something like this you simply
4:56
select your PDF file here and after
5:00
selecting it will entirely
5:04
so let me select a PDF file which
5:07
contains a lot of pages So it will see
5:10
on the left hand side it will tell you
5:12
exactly how many pages are there So it
5:15
will show the live preview for each page
5:17
You can navigate to each page do the
5:19
modification just
5:27
just you need to tap on the page and
5:29
then it will redirect you to that
5:31
particular page here
5:35
Just tap on the location on which you
5:37
want to add the text and then at that
5:40
location the text will be added So this
5:43
is the application you can try this
5:45
before purchasing it The link is given
5:48
in the description
5:50
and please hit that like button
5:51
subscribe to channel as well and I will
5:54
be seeing you in the next live stream