Up next in 10
Build a Word DOCX & PDF Canvas Editor to Sign & Add Watermark Using jsPDF & Fabric.js in Javascript
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-word-docx-pdf-canvas-editor-to-sign-add-watermark-using-jspdf-fabric-js-in-javascript/
Show More Show Less View Video Transcript
0:01
Uh hello guys, welcome to this live
0:03
stream. So in this live stream I will
0:05
basically show you a application that I
0:07
developed inside browser in JavaScript
0:10
and HTML. So this application allows you
0:12
to actually make PDF documents and word
0:16
documents in browser and uh you can
0:18
basically change the title here.
0:22
It's a visic editor. Here we have all
0:25
the controls out there. you can
0:28
construct your PDF document. So let's
0:30
suppose I want to center this. So I can
0:32
simply just use these visic editor
0:36
controls. So it's a complete editor. It
0:38
has all the functionalities and uh you
0:41
can basically select whichever title
0:43
heading that you want to select. You can
0:45
even right click
0:48
select all the thing that you want to do
0:51
and then you can even digital sign you
0:55
can add watermark to your PDF documents
0:57
as well. So as I right click basically
1:00
there will be this sign option I can
1:02
basically write the my signature and
1:04
basically do the digital signature
1:07
inside PDF document. So you will see now
1:10
your signature will be there.
1:14
So you can view it. You can also
1:15
download your signature as a PNG file as
1:17
well. So this is a transparent PNG file
1:20
which is downloaded of your signature.
1:22
You can see that. So in this way
1:27
you can embed the signature and
1:31
you can move it using your keyboard as
1:33
well. So as you reload the application
1:36
you will see something like this. You
1:38
just need this language is not English.
1:41
So you can basically delete that and
1:43
accordingly customize this accordingly
1:46
whatever that you want to write. So
1:54
so you can basically change your
1:56
heading. So
2:00
so very easy guys you can see that
2:05
how easily you can construct this. And
2:07
let's suppose you want to change this
2:10
color, highlight this, annotate this. So
2:12
what you can say is that you can just
2:14
right click it and select this and you
2:17
can change this color. So color picker
2:21
is there. You can see now this area has
2:23
been highlighted. This text has been
2:25
annotated with this orange background
2:26
color. So we have various options in
2:29
this editor right here. We can embed
2:32
images. We can underline text. We can
2:34
embed tables, numbers. So all this stuff
2:36
is there. At last if you want to
2:38
download this, you can basically click
2:40
this uh last button which is print
2:43
button. So we can even print this PDF
2:46
document or word document. If you want
2:48
to save it as a P PDF file or WP, you
2:52
can see that. So I want to save this as
2:54
PDF file. Simply I will click save and
2:57
just select your location and click
3:00
save. So if I open this now you will
3:03
basically see your changes have been
3:05
take place. You will see two pages are
3:08
there. This is all the customization
3:10
that you perform right here. The
3:12
highlighting is there. This is your
3:14
heading. This is the underline here.
3:16
This is actual watermark which is
3:17
present in both the pages. If you want
3:20
to add this watermark, [snorts]
3:22
if you want to customize this watermark,
3:24
there is basically this first of all
3:26
this option if you want to embed images
3:28
as well. So we can even embed images
3:32
accordingly.
3:34
We can just format this accordingly.
3:36
Just press enter and this image will
3:39
come in the next position. And you can
3:42
basically align this image accordingly
3:44
guys by pressing space and it will move
3:46
in the center or you can press enter it
3:49
will go down. So you can align this
3:51
properly. If you are baking a ebook, it
3:54
is very much very good software that I
3:56
developed in HTML, CSS, JavaScript. You
3:59
can embed your images accordingly. So
4:02
again, if you click
4:04
I just want to show you basically all
4:06
the changes will take place. The images
4:08
will also stay
4:11
and if I open this now, you will
4:13
basically see the image will be there.
4:15
The text highlighting will also there.
4:16
So if you are interested guys in
4:18
purchasing the source code of this
4:20
software the link is given in the
4:21
description you can purchase it and
4:23
after that you get a zip file uh
4:26
something like this you will get a zip
4:27
file after you extract this you will
4:29
actually get your CSS JavaScript and uh
4:32
HTML code this is actual directory
4:34
structure we have this minified code
4:37
right here you can just deploy this code
4:39
on your hosting platform if you want to
4:40
view this and this is the index html
4:43
file so the link is given you can
4:45
directly purchase it from Google Drive.
4:48
After you make the payment, you will get
4:49
a zip file. You just need to extract it.
4:51
It's a total client side application.
4:54
You don't need any serverside code. It
4:56
will work in any hosting plan that you
4:58
have. So, just purchase the hosting and
5:00
domain name and you can host this
5:02
application for free. It's a complete
5:04
editor. And let me show you some more
5:06
features of it. And let's suppose I want
5:08
to underline this text. So, I want to
5:11
change the text color. So, I will now
5:13
select the text color. this blue color I
5:15
want to change it. So you will see now
5:17
the text color has been changed to blue
5:20
color and let's suppose I want to bold
5:23
this text or underline this. So
5:27
now this text has become bold. So let's
5:30
suppose I want to here this is uh you
5:34
can see the it will remain whatever text
5:37
that you select right here and uh let me
5:39
change again to black here. So now as
5:42
you type you just need to select this
5:45
first of all.
5:52
So you can see now it has changed to
5:54
black.
5:58
So I'm just showing you some demo here.
6:00
Demo text I'm writing.
6:04
You [snorts] can see automatically as
6:06
you write in the document it will
6:07
automatically format to you. You don't
6:10
need to press enter. it will
6:11
automatically go to this next line.
6:15
So as I'm writing right here you will
6:17
basically see. So now I will basically
6:19
show let me select this portion
6:22
change to itallic. So it will now change
6:24
to itallic. All these features are
6:26
supported and let's suppose I want to
6:28
highlight this portion. So I want to
6:30
underline this. I will simply select
6:32
underline. So now this portion has
6:34
become underline. If you see underline,
6:36
itallic, bold, highlighting all this
6:38
stuff is happening. And let's suppose uh
6:41
all this stuff is there.
6:45
If you want to use this feature, this
6:48
will do something like this. So it's a
6:51
annotation feature if you want to do
6:53
this highlighting. So all these are part
6:57
of Vivic editor, word document editor.
7:00
You can find all these features in
7:02
Microsoft word editor. But I basically
7:04
built this inside browser. So you don't
7:06
need any external software. And now if
7:11
you want to basically make another
7:13
heading sample heading.
7:17
So you can basically select which
7:19
heading that you want from this
7:20
drop-down.
7:24
So this is the first heading which is
7:26
there.
7:33
You can select annotation. So you can
7:35
basically say this is some text. We're
7:38
going to annotate this. And now what
7:41
what will happen
7:44
this is some text. So and on the right
7:47
hand side basically if the user this is
7:50
some text. So this is showing right
7:52
here. So whenever someone hits this it
7:55
will highlight this portion. So you can
7:57
basically highlight any portion here.
7:59
Let's suppose I want to annotate this. I
8:01
can simply rightclick annotation and
8:03
just write something. uh this is
8:06
JavaScript.
8:09
So now this will be added. So whenever
8:11
someone goes to the next page when they
8:14
write it will automatically goes to that
8:16
portion and highlight this portion right
8:17
here. You can see that. So it's very
8:20
useful for that.
8:24
And now I will basically show if you
8:26
want to embed tables in the PDF
8:28
document. So there is a option here to
8:31
actually embed a table. So 3x4. So three
8:35
rows will be there, four columns will be
8:36
there. So you will see the table has
8:38
been inserted. You can basically give
8:41
the column names
8:46
like this and you can align them
8:48
properly like this
8:53
by pressing space.
9:01
just t uh press the tab key and it will
9:04
in in the normal so in the center of the
9:06
screen. So
9:15
so [snorts] you can see that guys how
9:16
easy it is to actually do this.
9:26
You can construct your PDF documents
9:28
very easily, word documents accordingly.
9:30
If you're constructing a ebook then it's
9:33
very useful software.
9:38
So now if I want to just save this work,
9:43
I can save this now.
9:50
So if I try to open this now
9:53
just show you. So now you can see all
9:56
the stuff has been saved guys with all
9:58
the functionalities that we have done
10:00
right here. You can see that this is
10:03
actual heading. This is the subheading.
10:05
This is actual table which is inserted.
10:07
This is actual heading right here. This
10:09
is the image that we inserted. And you
10:13
can basically see the watermark which is
10:15
there in gray color. If you want to now
10:17
customize the watermark as well, you can
10:19
even do that as well. Let me show you.
10:22
There is an option right here which
10:24
first of all let me show you the
10:26
hyperlink. So let's suppose I want to
10:29
embed a website here http if you want to
10:33
just share some websites
10:36
and now I want to construct this uh just
10:39
convert this into a hyperlink. So if the
10:43
user clicks this link they will redirect
10:45
to google.com. So just now you will see
10:48
it has converted into hyperlink.
10:51
Similarly, https.
10:57
So you can see that guys, now these
10:59
links are clickable. So anytime the user
11:01
clicks the these two links, they will
11:02
redirect. And now I will basically show
11:05
this option which is if anytime you want
11:08
to add this dividing line, a horizontal
11:10
line, you can basically press this
11:12
option. So various options are there.
11:15
You can basically do this line.
11:18
You can also have these options. Undo if
11:21
you want to undo something or redo
11:23
something you all basically all these
11:25
controls are there. If you see in the
11:27
left hand side corner so if you
11:29
intentionally do test something that you
11:31
want don't don't want to do you can
11:33
press this buttons right here it will
11:35
undo and redo. So now let's suppose I
11:37
want to add this horizontal line.
11:40
So now this horizontal line has been
11:42
added. So this just beautify the PDF
11:45
document that you are constructing. So,
11:49
so I showed you this watermark. So, now
11:51
if you want to remove this watermark,
11:53
you can remove it. Now you can see the
11:55
watermark is not there. Now, [snorts] if
11:57
you want to add your own watermark,
11:59
there is an option right here. If you
12:01
want to add your own watermark, let's
12:03
suppose your company name, whatever name
12:05
that you want to add, coding, you can
12:07
basically customize the color of the
12:09
watermark. Let's suppose I want this to
12:12
be gray or blue color. any color you can
12:16
choose from this color picker.
12:20
Let's suppose I pick this color
12:23
and then you can even control the size
12:25
of size of it as well. So 110 let me
12:28
just say. So now you can see basically
12:31
the watermark has been added guys. You
12:34
will see that basically
12:36
and uh if I try to now save this
12:40
into a PDF document.
12:47
So if I open this now you guys you will
12:49
see the changes have been taken place
12:51
and you can see the watermark has been
12:54
reflected. You can change the color,
12:56
size, everything. You can customize it.
12:58
And you can see the beautiful, it is
13:00
looking very beautiful. And uh if I
13:02
click this link right here, these links
13:05
are clickable.
13:09
Uh I think these links are not clickable
13:11
in this. Now
13:14
uh but you can just construct them so
13:17
that they are looking at links.
13:20
I don't know why it is not applicable
13:22
but uh they should. But
13:26
you get a sense of it. These links are
13:28
clickable. These are if you want to
13:30
embed links, you can basically give
13:32
this. So apart from that, we have more
13:36
options right here. Let me show you. If
13:37
you want to add some more pages, so uh
13:40
in this PDF document, there is only a
13:43
single page. So if you want to add some
13:45
more pages, how you can do that? So
13:48
there is an option right here.
13:52
As you just write something, it will
13:53
automatically redirect to the second
13:55
page and automatically your watermark
13:57
will be added. If you want to sign this
14:00
page, you can right click sign. You can
14:05
say sign your signature. You can place
14:08
the signature anywhere else in the page.
14:16
You can see that press the space bar and
14:18
accordingly just uh
14:22
align this properly
14:24
and there is also an option if you right
14:27
click the formatting option. So it will
14:30
automatically format that for you if you
14:33
don't want the auto formatting but it
14:35
looks good.
14:37
So,
14:42
so basically you can just write some
14:45
text right here in in
14:48
sample text.
14:50
So, whatever text that you want you will
14:53
write when you just do this. So, let me
14:56
copy all this text right here.
15:11
So you can see that automatically the
15:13
text has been copied and you will
15:15
basically see it has constructed the
15:16
pages and all of these pages have
15:19
containing the watermark if you see
15:21
that.
15:24
So in this way if you have the text
15:27
already available to you you can just
15:29
copy paste the text and automatically
15:31
your pages will be constructed and then
15:34
in this way
15:36
16 pages are there. So you can save the
15:38
PDF work.
15:50
So you can see it now contains 16 pages
15:53
and uh you can see that so
15:58
all these things have been there.
16:04
So so watermark if you see right here.
16:11
So if you need this uh code guys the
16:14
link is given you can directly purchase
16:15
it. After that you will actually get a
16:17
zip file which is this one. You just
16:19
need to extract this. This will
16:21
basically give the minified code and all
16:24
these images, fonts will be available
16:26
the CSS code. You just need to open this
16:29
index html file in the browser. You can
16:31
directly
16:33
open it and it will open it in the
16:35
browser and uh
16:39
then you can basically construct your
16:40
document. So all these options are
16:42
there.
16:48
So you can even embed code blocks. So if
16:50
you are a programmer, let's suppose if
16:52
you want to add some coding snippets. So
16:58
if you are basically a programmer, so
17:00
you can also embed these coding
17:03
snippets.
17:06
So this is I think a Python code
17:13
you can see. So syntax highlighting is
17:16
also supporting if you see already print
17:18
statement it has its own colors right
17:20
here variable names that we declared
17:22
right here. So if you have some
17:23
JavaScript code that is available for
17:25
you you can just do this. So this is the
17:28
page break thing guys if you want to
17:31
split the pages into let's suppose I
17:35
want this in into a different page. So I
17:38
can simply select this option which is
17:40
page break just right here. So now this
17:43
will be in the separate page. So it will
17:46
split this into a different pages right
17:49
here. This will be in the different
17:52
page. This will be in the different page
17:53
and this will be so it has split this
17:56
document into three different pages
17:58
using this tool right here which is page
18:00
break. It's a very important tool. You
18:02
can basically use this tool to actually
18:04
split the pages into multiple pages
18:07
based upon the text that you have
18:09
written. So now you can see that. So you
18:13
can actually write some more text right
18:15
here.
18:30
So you can see you can more just write
18:32
some more text.
18:36
[snorts] So page numbers you will
18:38
basically see automatically will be
18:39
there. This is the first page. This is
18:41
actual second page. So as you basically
18:44
add more pages automatic page page
18:46
numbers will automatically gets added.
18:48
We don't need to worry about that. And
18:50
uh after that we have more tools control
18:54
tool. You can also embed checkboxes as
18:58
well. If you want to add if you're
19:00
constructing forms, we have this option
19:03
of uh checkbox.
19:07
If you see basically we have this
19:09
checkbox right here. We can select this,
19:11
unselect this. You can have true false.
19:17
So,
19:21
so if you're constructing uh forms in
19:24
PDF documents, you can use these
19:26
controls out there.
19:32
So this is latex text here. You can
19:35
basically.
19:41
So [snorts] if you want to embed date
19:43
field as well. You can even embed date
19:45
fields. You you can see that this is
19:48
calendar out there. You can select any
19:50
date of accordingly.
19:57
So I explained all you the controls
19:59
right here guys and in this video if you
20:01
are interested
20:03
this is order list if you want to solid
20:06
dots if you want to add ordered list
20:08
unordered list all these controls are
20:10
there picture table that I showed you
20:16
can have this things unordered list
20:19
ordered list this is 1 2 3 so if you
20:22
want to embed list out There you can
20:24
also do that alignment. You can align it
20:26
right, left, center, all these things
20:29
supported.
20:31
And that's all. So this this is actual
20:33
application. You can view it in full
20:35
screen mode as well. And uh orientation,
20:38
paper orientation, portrait, it's
20:40
selected by default, but you can change
20:42
it to horizontal, which will take uh
20:44
full size. This is total different. Zoom
20:48
in, zoom out, all these controls there.
20:51
So paper type you can basically select
20:54
stationary various paper types supported
20:57
A2 A4 A5
21:00
you can change this accordingly.
21:04
So this is actual application guys if
21:06
you are interested the link is given and
21:08
you can directly purchase it and you
21:10
will actually get the zip file you can
21:12
extract this and uh directly upload it
21:15
to your hosting plan or use it. Please
21:17
hit that like button, subscribe the
21:19
channel and I will be seeing you in the
21:21
next video.