0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a PDF
0:04
mini PDF editor which I developed inside
0:08
browser using uh plain HTML CSS and
0:11
JavaScript and uh you can see this is
0:13
actually the application and here there
0:16
is a choose file button where you will
0:18
select your PDF file so you let me
0:22
select a simple PDF file here so as you
0:26
select your PDF file you will see the uh
0:29
PDF file will display this is the page
0:31
one and uh we also can go to the next
0:34
page so this is page one of the two
0:36
pages and then we this is a second page
0:39
so now if you want to edit something
0:41
right here there is an option right here
0:44
edit page you simply click this option
0:46
and then now it changes into this mouse
0:50
here you can annotate it you can change
0:58
annotate by making this modification and
1:01
then you can again click the button stop
1:04
editing to so now you can see all the
1:07
changes that you have done are made you
1:09
can increase the size here
1:13
accordingly and then you can even add
1:16
text as well so let's suppose any
1:18
watermark that you want to
1:21
add and then you simply click add text
1:25
so at whichever location you want to add
1:27
this text so let's suppose I want to add
1:30
right here so this text will be added if
1:33
that now we have the button save
1:36
PDF so you can see that uh automatically
1:40
all the changes have been successfully
1:44
text is also added the annotation is
1:47
also being done right here if you see it
1:50
is built guys this tool is built
1:52
entirely in the browser and you are
1:55
using some third party packages for this
1:57
first of all we are using PDFJS for
1:59
rendering the PDF then we are using PDF
2:02
lip for uh modifying the PDF and then we
2:06
are using fabric JS which is again a
2:09
JavaScript animation library so if you
2:12
don't know about Mosilla PDFJS if you
2:15
just write this this is actually the
2:17
JavaScript library that renders the PDF
2:20
file in the browser using HTML 5 canvas
2:23
so we are using this library and also we
2:26
are using this PDF lib library which is
2:29
a JavaScript uh library for modifying
2:33
and creating PDF files right in the
2:36
browser and then lastly we are also
2:39
using fabricjs which is a javascript
2:41
animation library it's a very popular
2:44
HTML canvas uh animation fabric chs so
2:49
we are using these three packages three
2:51
libraries and the nice thing guys is
2:54
that it actually works entirely in the
2:57
browser once you load the application it
2:59
will be working as a static application
3:02
single page application so the link is
3:05
given in the description guys if you
3:08
want the full source code of this
3:10
application you can directly purchase it
3:18
procodestore.com after purchasing it you
3:20
will be redirected to Google Drive where
3:22
you will actually get this
3:25
uh index.html file the script js and the
3:29
style dot CSS so this is actually the
3:30
HTML file right here and this is you can
3:33
see the JavaScript file here i written
3:36
this editor from scratch so 174 lines of
3:39
JavaScript code and also we have the CSS
3:42
code for styling it so once you get the
3:43
code guys you can easily modify it and
3:46
also add additional features and you
3:48
will be able to see how practically I
3:51
have used these three packages to build
3:52
the entire PDF editor so it's a mini PDF
3:56
editor built using canvas using these
3:59
three packages so if you are interested
4:00
the link is given in the description you
4:03
can directly purchase it and thank you
4:05
very much guys for watching this video
4:07
and also check out my website as well
4:10
freemediattools.com which contains
4:12
thousands of tools regarding audio video
4:14
and image and I will be seeing you in
