Up next in 10
Build a Canva PDF Offline Editor to Annotate & Edit PDF in Browser Using jsPDF & Fabric.js in HTML5
24 views
Apr 1, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-canva-pdf-offline-editor-to-annotate-edit-pdf-in-browser-using-jspdf-fabric-js-in-html5/ 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/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a advanced
0:05
PDF editor I developed something like
0:07
canva it can be used to edit PDF
0:09
documents or annotate them directly in
0:11
the browser itself so I basically have a
0:15
live demo available on my website free
0:17
mediat tools.com you can check out the
0:19
demo uh this is actually the application
0:22
it is entirely built in the browser
0:24
using HTML CSS and JavaScript and here
0:27
you will load your PDF file whichever
0:29
PDF file that you want to edit and
0:32
automatically we have all these options
0:34
available to us we can either uh click
0:37
edit text so this will automatically you
0:40
will be able to edit the text here
0:42
simply click and this will change this
0:45
to editable and now you can actually add
0:48
some text right here you can change the
0:51
color here
0:53
accordingly can see
0:58
that you just need to click on the
1:00
element right here just click on the
1:03
element and you can
1:07
see and then we also have a option to
1:10
actually add a text so just click this
1:13
button and wherever you need to add this
1:17
simply and you can basically uh increase
1:20
the phone size as well like this place
1:23
the text accordingly just use the your
1:25
mouse cursor to place the text wherever
1:28
in whichever location
1:30
here you can change the phone size as
1:33
well can see that can change the color
1:37
as well this is the first page this is
1:40
the second page so you can easily edit
1:42
your PDF documents adding text then we
1:45
have the capability to add images as
1:47
well so click on the add image button
1:50
and this window will open and here you
1:53
need to Simply select the location where
1:57
you need to add the image simply click
1:59
and that image would be added right here
2:01
if you see that you
2:02
can control the size of this image by
2:05
using these controls very easily then we
2:08
have
2:09
actually annotation drawbox if you click
2:13
this you will be able to actually select
2:17
any particular element and you can uh
2:21
highlight this very easily just select
2:23
it by using your mouse so you can see
2:26
how easy it
2:28
is then we also have our pen tool if you
2:33
want to highlight something annotate
2:35
something you will use this pen tool to
2:38
highlight something if you see
2:40
that you can see this is the pen
2:44
tool and after you have modified all the
2:47
PDF we have this button of save PDF so
2:51
if you simply click on this button you
2:52
will see it this processing it and now
2:55
your PDF file has been downloaded with
2:58
the changes that you have done so you
3:00
will see that all the modified changes
3:02
the images the text the highlighting The
3:05
annotation done is entirely saved in a
3:07
PDF document and you can see that so it
3:11
is entirely run in the browser guys the
3:13
link is given in the description if you
3:14
need the full source code of this
3:16
project uh you will actually get a zip
3:19
file after you purchase the full source
3:23
code uh the link is given in the
3:28
description uh let me show
3:31
you so this is actually the zip file you
3:34
will get you need to extract it and then
3:38
it will contain this CSS code HTML code
3:41
and JavaScript code so this is your
3:42
index. HTML file you can directly run
3:45
this locally using a vs code extension
3:49
uh you can also directly open this
3:53
file locally so just right click and
3:58
open with chrome here so it will open
4:01
your file
4:04
locally you see
4:06
that so it entirely runs in the browser
4:10
it doesn't need any server for its
4:12
functioning it's very easy to deploy as
4:14
well so if you're using a shared hosting
4:16
you can easily deploy this
4:19
application very easily so you can see
4:21
that can change the phone size so
4:25
wherever can also change
4:30
it's very fast as well so you can see
4:33
how fast this application is you can
4:35
draw the
4:38
Box very easy very fast application to
4:42
highlight and then we have the save PDF
4:46
button so we have all these controls
4:48
available click on this button so it
4:50
will process all the changes and then it
4:52
will download this modified PDF file
4:55
right here so this is the source code
4:58
guys the HTML code code and then we are
5:01
using some third party open source
5:03
packages right here first of all mozila
5:05
PDF JS fabric JS with a JavaScript
5:09
animation library and JS PDF so let me
5:12
one by one show you the libraries that
5:14
we have used here Mozilla PDF JS which
5:17
is a PDF renderer library for rendering
5:21
PDF files directly in the browser so
5:23
it's a open source Library you can see
5:26
we are using this one and then we are
5:28
using fabricjs which is a JavaScript
5:30
animation library for animating the
5:34
canvas so we are using this Library as
5:37
well and apart from that we are also
5:39
using jspdf Library as well so which is
5:42
again a a library for generating PDF
5:45
files directly in the browser so we are
5:47
using these three uh open-source
5:50
libraries in JavaScript to build this
5:52
awesome looking canva PDF editor and
5:55
annotator which directly runs in the
5:57
browser it's a static app you can
6:00
directly purchase it guys the link is
6:02
given in the description once you
6:04
purchase it you will get the full source
6:06
code a zip file from Google Drive
6:09
automatically and inside your Javascript
6:11
file here you will see these are the
6:13
files here so once you get the source
6:16
code if you are a developer you can also
6:18
modify this source code to add
6:19
additional features you will get full
6:21
commercial right to actually use this
6:23
application commercially as well if you
6:26
want to deploy this and earn some
6:28
Revenue advertisement menu because you
6:30
can place advertisements right here I am
6:33
also placing advertisements
6:36
here so before purchasing it you can try
6:39
this Ive also deployed this on my
6:41
website so on the checkout page you will
6:43
find this link so just try this before
6:45
purchasing it if you like it then you
6:47
can purchase it the link is given in the
6:49
description so thank you very much guys
6:51
for watching this video and also check
6:53
out my website free mediat tools.com
6:55
which contains thousands of tools
6:58
regarding audio video and image and I
7:00
will be seeing you in the next video