Up next in 10
Build a PDF Editor to Annotate & Add Text & Images Using PDF.js Web App in HTML & JavaScript
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-pdf-editor-to-annotate-add-text-images-using-pdf-js-web-app-in-html-javascript/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
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:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
create a PDF editor which runs directly
0:08
in the browser it can be used to an
0:11
annotate your PDF documents with text
0:14
images as well so you can see it
0:16
actually have this interface you select
0:19
your PDF document whichever PDF file
0:21
that you need to edit and
0:24
uh let me select this one and as soon as
0:28
you select this you will see the file
0:30
will be displaying it in the browser
0:32
this is a first page second page it will
0:34
automatically detect how many pages are
0:36
there and we have these controls zoom in
0:38
zoom out so it's also very good for
0:41
reading files reading PDF files and
0:44
write in the browser itself you don't
0:45
need any third party software and then
0:48
we have additional options right here in
0:50
the toolbar if you see one by one so
0:53
first option is for printing it out if
0:56
you want to print this PDF file there is
0:58
a print button directly click this
1:00
button and you'll be able to print the
1:03
second option is that
1:05
for adding text so if you want to
1:08
annotate the PDF
1:09
file so here you can simply click this
1:12
option and then just control the size of
1:17
it and then you simply click the
1:21
location where you need to add the text
1:23
so let me add
1:24
this and then here we can place it
1:27
accordingly just select the location you
1:29
want to place place the text and you
1:31
even change the color as well so you can
1:33
see
1:37
that you can add multiple text here just
1:40
click at the location you want to add
1:42
the text and you can see that so the
1:46
next option we have is to draw if you
1:48
want to annotate say there is a pencil
1:51
icon if you
1:53
see so again you can control the
1:56
thickness of it opacity as well so using
1:58
these sliders
2:01
so if I do this you will see this is
2:04
actually your annotate so if you want to
2:07
highlight something in the PDF you can
2:08
easily do that go to the next page do
2:12
the same thing you can see how easy it
2:14
is you can even change the color from
2:17
the Color
2:20
Picker you can do multiple highlighting
2:23
so if you want to change it to this
2:25
color green color
2:32
now we can even have the add image
2:34
option as well so this is your last
2:36
option image options so click add image
2:39
so if you want to add any image on
2:42
this can easily do that can place your
2:46
image control the size of
2:49
it that's all so then after you modified
2:53
your PDF there is a download button here
2:56
this is your download button click the
2:58
download button you will see see the
3:00
modified PDF will be downloaded with the
3:02
changes that you have done this is your
3:04
image highlighting the text that you add
3:07
it this is the tool guys it directly
3:10
runs in the browser that's the famous
3:12
part and I developed this in simple HTML
3:15
CSS and JavaScript if you need the full
3:17
source code the link is given in the
3:19
description you can go to my website
3:21
brod store.com and directly purchase the
3:23
full source code and after you purchase
3:26
it you will get the zip file and
3:29
after you extract the zip file you will
3:31
get this directory structure and now for
3:34
running this project you come to the
3:36
terminal and if you want to run it
3:40
locally just run this command here npm
3:43
run Dev before that you just need to
3:45
npmi this will create a nodejs modules
3:49
folder to actually install all the
3:52
nodejs modules and then say npm run Dev
3:56
this will start the development server
3:58
Local Host 3,000 you'll
4:01
see so if you just go to Local Host 3000
4:06
so we are running it this application so
4:08
this application will open this is here
4:11
you can select your
4:16
file so there are in this file is 23
4:19
pages so you can see you can go to any
4:22
location by previous next page like this
4:25
as well can input directly the page
4:28
number go to that page number as well
4:31
so I showed you all the functionalities
4:33
now come to the source code you will see
4:35
it coded inside typescript the code is
4:38
very easy to understand if you are a
4:39
developer you can even extend the
4:41
capabilities of this application as well
4:43
to add additional features so you can
4:46
see that so we
4:48
are in the package.json file so these
4:51
are different commands out there we have
4:53
the start command development command
4:56
and you can even uh basically we are
4:58
also using electr on here you can
5:00
convert this application into a desktop
5:02
application as well so if you want to
5:04
run it as a desktop application rather
5:06
than as a web application you can simply
5:09
run this command npm Run
5:12
start so this will now run as a electron
5:15
application as a desktop application
5:19
so you can see it is address already in
5:22
use so first of all you need to stop
5:25
this so at end at one time you can even
5:28
run one
5:30
so
5:31
again run this npm Run start
5:34
for starting it as a desktop application
5:38
so you can see that it is using electron
5:42
here and you can use it as a desktop
5:45
application as well
5:48
so the process will remain the same you
5:51
select the PDF file that you want to
5:53
edit all the functionalities will remain
5:56
the same so this time it will be a
5:57
desktop application so if you click the
5:59
save
6:00
button like
6:02
this you can choose which application to
6:06
run so this is actually the application
6:08
guys and it uses the PDF JS library on
6:13
top of it we are developed this
6:14
application pdf.js if you don't know
6:17
it's an open source
6:22
JavaScript PDF JS is a PDF generation
6:26
library in JavaScript so we have used
6:28
this Library and built on top of it to
6:31
actually build this entire application
6:32
in HTML CSS and JavaScript and if you
6:36
check the public folder you will see
6:38
this is coded entirely in HTML CSS and
6:41
JavaScript if you need this project guys
6:43
the link is given in the description you
6:45
will get the full source code from my
6:47
website brod
6:49
store.com and uh also visit my website
6:53
as well free mediat tools.com which
6:55
contains thousands of tools regarding
6:57
audio video and image and I I will be
6:59
seeing you in the next video
#Flash-Based Entertainment