Up next in 10
Build a Vue.js Canva Clone PDF & Image Editor Using jsPDF, Fabric.js & Html2Canvas Library in TS
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-vue-js-canva-clone-pdf-image-editor-using-jspdf-fabric-js-html2canvas-library-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello friends, welcome to this video.
0:02
So in this video I will actually show
0:04
you a Vue.js Canva clone image and PDF
0:08
editor that I developed inside browser
0:11
and also I have deployed this website on
0:15
my website freemediatools.com/view
0:18
clone. So you can actually check out
0:20
this tool. So this tool looks like uh
0:24
very much like Canva. You will see that
0:26
the interface the UI looks like Canva.
0:30
So we have the templates right here. If
0:32
you click templates, you can basically
0:34
select any template that you want and
0:36
then you can edit it, change the text
0:40
like this.
0:44
So we have various templates out there.
0:46
You can even add your own templates.
0:48
Once you get the source code, you can
0:50
add the templates in a folder. I will
0:52
show you the source code. It is coded
0:54
inside Vue.js. It is using JS, PDF, HTML
0:57
to canvas and fabric JS library. And
1:00
also we have different shapes out there.
1:02
You can add all these shapes. It is
1:04
actually there in SVG.
1:08
If you want to create a new document,
1:09
you can simply click new. Uh this will
1:13
remove this design. So you can just need
1:14
to confirm it. You can add multiple
1:17
pages as well like Canva. So there is an
1:19
option right here. If you want to add
1:21
multiple pages, you can add multiple
1:23
pages right here. And also there is a
1:26
resize option right here at the bottom
1:28
screen. If you want to resize to a
1:30
particular width and height, you can
1:32
provide let's suppose I want to provide
1:35
the width to be 500 and height to be 500
1:38
and click resize. So your canvas will be
1:40
resized. And here you can apply
1:42
whichever background color you want.
1:46
Various effects are there. If you want
1:48
to do Instagram post, so there are very
1:51
various presets out there. Instagram
1:54
story, you will see Facebook post,
1:55
Facebook cover, Facebook ad, YouTube
1:58
thumbnail, YouTube channel, full HD
2:00
invitation, A4 card. So all these
2:03
predefined sizes are also available. If
2:05
you don't want to resize your document,
2:07
just select it from these pre
2:09
predefined. You can select this very
2:11
easily.
2:14
And also we have the various shapes out
2:16
there.
2:20
So these are various shapes you can
2:23
change it.
2:26
Then we have the ability to actually
2:30
add the title.
2:35
You can actually control the size of the
2:38
text by or you can simply use the ma
2:42
mouse here. Just place the text
2:44
anywhere. You can add multiple
2:47
text.
2:52
[snorts]
2:55
You can perform. You can change the
2:57
color
2:59
like this. So here if you want to change
3:02
the background color, you need to go to
3:04
the background section and here you can
3:06
change the background color like this.
3:08
Really easy.
3:10
So now if you want to export this design
3:12
you have this option of save as and
3:15
either you can save it as PDF document.
3:17
If you select PDF your design will be
3:20
saved as a PDF document if you see.
3:23
So if you want to save it as a image
3:26
file then you will simply select image.
3:28
So there are various options out there.
3:30
You can export this to PNG, JPG, BMP,
3:33
WEBP. So let's suppose if I select PNG.
3:36
So now if you see the export design has
3:39
been successfully exported to PNG and uh
3:42
let me show you the second one JPG also
3:45
the same.
3:48
So we also have the option to which is
3:51
BMP which is also an extension
3:58
like this. So webp is actually a new
4:02
extension which runs in the browser
4:04
which actually is optimizes the size of
4:06
your image. So it's very good for web
4:09
thumbnails. So all these extensions are
4:12
supported and if you want to search
4:14
images from unsplash you will basically
4:17
search any images you can type here
4:19
laptop. If you want to get laptop images
4:22
so it is coming through unsplash. We are
4:24
using the unsplash API to actually get
4:26
all these images dynamically. [snorts]
4:28
You can use these images like this as a
4:30
background.
4:34
So there is also this or you can upload
4:37
your own images as well. So there is an
4:39
option here. You can select multiple
4:41
images and then if you want to
4:46
want to delete a page you can simply
4:48
click the remove button. So that page
4:50
will be removed. So if you want to add a
4:52
image it's very simple.
4:55
Click the plus icon. So your image will
4:57
be added. You can place the image
4:59
accordingly. Just
5:01
you can make a very awesome little
5:03
thumbnail. So same thing that we do in
5:06
Canva. We the interface is quite natural
5:11
and you will find it very easy. So now
5:15
you want to export this. You can export
5:16
this with image the PDF document. So you
5:19
will now see the successfully the image
5:22
is successfully exported. And uh we have
5:26
also the different layers out there. If
5:28
you see we have different layers. We
5:30
have the image layer which is there. The
5:33
text layer each and everything. You can
5:35
even lock your image file. There is lock
5:38
option.
5:39
You can change the opacity of this
5:41
image. Control it transparency. You can
5:44
change the position, align it top, left,
5:47
center, every every location. You can
5:49
rotate this as well by selecting all
5:51
these options. So all these controls are
5:53
there. We also have the undo and redo
5:56
options as well.
6:01
So we also have this undo redo options
6:03
as well. So,
6:13
so it's a fully fleshed editor guys
6:15
which where you can actually export your
6:18
design to PDF image and uh you can
6:22
individually delete this image if you
6:24
don't want to by clicking the dustpan
6:26
icon.
6:29
[snorts] You can even apply effects to
6:30
your images. So you can
6:34
basically blur your image like this.
6:36
There is an effect out there. If you
6:39
want to change the brightness, you can
6:40
change the brightness like this.
6:45
So these are all the different effects
6:48
which are there. Border, you can add uh
6:51
any border of your color. Let's suppose
6:53
I want to add a white border.
6:58
So these are different corner radius.
7:00
You can even give
7:05
if you want to give it a shadow. There
7:07
are various controls out there. You can
7:09
play with this editor guys. I'm not good
7:11
at designing. So all these things are
7:13
there. You can just see the power of
7:14
this editor. You can put shadows, you
7:16
can add box shadows, everything. You can
7:19
add borders as well. You can apply all
7:21
these effects to these images. And now
7:23
coming back to the source code. This is
7:25
actually the full directory structure
7:26
you will get after you make the payment.
7:28
The link is given in the description.
7:30
You can go to my website
7:31
procodestore.com and after you purchase
7:34
it, you will actually be redirected to
7:35
Google Drive. You will where you will be
7:38
getting the zip file which will contain
7:40
this directory structure and inside the
7:42
source directory we have this all this
7:44
code. So we have the different
7:46
components out there. It is you can see
7:48
all these components are coded inside
7:50
Vue.js JS and [snorts] uh the latest
7:53
version of Vue which is Vue3. And if I
7:56
show you the package.json file, the
7:58
different dependencies that we are
8:00
using, we are using the fabric.js which
8:02
is a open-source library. We are using
8:04
the JSPDF library which is again a
8:07
open-source PDF library and [snorts]
8:09
also we are using HTML to canvas library
8:11
which is again a open-source library for
8:14
exporting the HTML to canvas. [snorts]
8:18
So you also have the option to if you
8:22
don't belong to English language if you
8:25
don't comfortable you can select your
8:27
own native language Portuguese, Dutch,
8:29
France language, Italian, Spain, Spanish
8:32
all these languages are supported. If
8:34
you now you will see your text will be
8:38
converted to your respective language.
8:40
So if you're not from English country
8:42
you can select all of all of these
8:45
native language which are supported. So
8:47
once you get the source code you can
8:48
actually edit this project to add more
8:50
languages to add more shapes more
8:53
images. So actually the directory
8:56
structure is there for each and every
8:58
style right here the data this actually
9:01
contains the templates. So you can add
9:03
more templates once you get the source
9:06
code once you understand the source code
9:08
you can add your own templates as well
9:10
in this file the template.ts TS all this
9:13
coded inside Typescript and we also have
9:16
the folder for different assets. You
9:19
will see these are SVG files which we
9:22
actually use as different shapes. You
9:24
can add your own shapes as well by
9:26
actually converting it to SVG file. So
9:28
you can add your own shapes as SVG files
9:31
once you get the source code. So before
9:33
purchasing it, you can actually try this
9:35
full demo. I have deployed this demo on
9:38
freetools.com view clone. So before
9:40
purchasing it you can actually try this
9:42
demo. If you like it then only purchase
9:45
it and uh you can see that so all this
9:47
code is there. We are not using any
9:50
third party or [snorts] paid library. It
9:54
is all open source. So once you purchase
9:56
it you will have full commercial right
9:58
to actually deploy this to any website
10:00
or use it or modify the source code.
10:03
Everything you have the right. So I
10:05
showed you all these open-source
10:08
libraries. We haven't used any third
10:09
party subscription based library. So
10:12
these are all open-source libraries. I
10:14
built this from scratch and uh you can
10:17
just see so
10:20
[snorts] the SAS you can see this is all
10:22
the sty stylesheet
10:25
which is there.
10:28
So this is the app view folder.
10:31
So it's a fully flesh editor and uh
10:33
basically we are running it on local
10:35
host. So once you get the source code
10:37
you just need to initialize go to the
10:39
directory and just initialize this
10:41
command npmi. So this will actually
10:44
install as a de uh all the modules. Now
10:47
you just need to npm rundev to actually
10:50
start that as a local development
10:53
environment npm rundev. So vit will
10:56
actually start a new development server
10:59
which is localhost 5173. So if you visit
11:03
localhost
11:05
5173
11:07
you will actually see your project will
11:09
be started.
11:11
So it will take some time because it's a
11:13
huge project. So 5 10 seconds it will
11:16
take for the very first time. So just
11:17
wait for the project to get started.
11:23
It needs to compile all those assets all
11:26
those images and then it will start.
11:28
You'll see 5 10 seconds and then you can
11:30
actually [snorts] add your text.
11:35
You can add your own images.
11:42
You can see you can save it. All these
11:44
things are working. So I just want to
11:46
show you locally as well. It is
11:49
perfectly working. So you can add a back
11:52
background here. So then you can export
11:56
this PDF document is also working
11:58
perfectly. [snorts] You can just see. So
12:02
this is actually the project and if you
12:04
want to deploy this
12:06
you can run a command npm run build. So
12:09
what it will do it will actually create
12:11
a disk directory in the root in the left
12:14
hand side. If you just see if you run
12:16
this a dist directory will be created.
12:19
It will compile all your assets, bundle
12:21
them into a dist folder where you can
12:23
actually deploy this project into any
12:25
sort of hosting, shared hosting, cloud
12:27
hosting or any VPS hosting. So it will
12:30
give you the minified HTML, CSS and
12:33
JavaScript code alongside with all the
12:35
assets are available. So just see on the
12:37
left hand side, it will actually create
12:39
a disc folder. So this folder is created
12:43
and now you can just see all the assets
12:46
have been bundled and you can actually
12:48
see the project files which are there
12:51
all the assets the editor different kind
12:54
of fonts which are used the lines SVG
12:57
shapes different templates so it's a
13:00
fully fledged project guys you will see
13:02
this is a starting point here for
13:03
application you just need to run this
13:06
index html
13:08
so this is the actual project. So
13:14
you can just see you can basically a lot
13:17
of fonts are there unlimited number of
13:19
fonts. You can even add your new Google
13:21
font as well. If you have a TTF file you
13:24
can click this button and simply upload
13:26
a your own font. You can download TT
13:30
file from Google fonts. If you try to so
13:33
there are lots of customized Google
13:35
fonts available. You can upload this
13:37
font as well. So by clicking this and
13:39
uploading it. So
13:43
but we have various customized fonts as
13:46
well but you can select this option.
13:50
So various other phones are there. You
13:51
can see how many different kinds of
13:53
fonts are there. Can just change the
13:55
text
13:57
and uh these are different line height.
14:00
You can control letter space. All these
14:02
things are customizable.
14:05
So you can try this on free media tools
14:07
view Canva clone on the check out page.
14:09
The link is given in the description.
14:11
You can purchase the full source code.
14:13
Once you purchase it, you will get the
14:15
zip file. So before purchasing it, you
14:17
can actually check out the live demo. So
14:23
this was I showed you all the features
14:25
guys which is are supported by this.
14:27
It's a Canva clone.
14:30
>> [snorts]
14:30
>> So, thank you very much for watching
14:32
this video and I will be seeing you in
14:34
the next one.