0:00
Welcome to this live stream. So in this
0:01
live stream, I'll show you a Vue.js
0:03
Canva clone editor that I developed
0:06
inside the browser. It's a Canva clone.
0:09
I've also deployed this and given the
0:11
demo link in the description of this
0:12
video. You can check out the demo. So
0:14
the interface looks something like this.
0:16
It's similar to Canva.
0:18
So once you land on this interface, you
0:21
will be granted with this interface. So
0:24
we have this menu. All the templates are
0:26
there. You can one click you can use any
0:29
sort of template in various sizes
0:32
and you can edit this to make
0:34
thumbnails. We also have shapes. So you
0:37
can export this canvas into image or
0:39
PDF. So it's developed inside Vue.js.
0:42
This is overall project. It's developed
0:44
using JSPDF HTML to canvas libraries
0:49
and you can fabric JS as well. So we
0:51
have used third party uh packages. So I
0:54
have given this link. You can directly
0:55
purchase the source code. So once you
0:57
purchase it, you will basically be
0:59
having this uh interface uh full
1:02
directory structure. Each component is
1:04
divided into its multiple Vue.js files.
1:07
Here you can see. So this is the overall
1:09
project here. We using the latest
1:11
version of Vue 3.4.21.
1:13
So once you are inside this interface,
1:16
what you need to do first of all you
1:17
just need to run the project. Just
1:19
execute the command npmi. So this will
1:21
install all the NodeJS modules and then
1:24
you simply run the command npm rundev.
1:27
So this will start the development
1:29
server at localhost 5174.
1:33
So as you can see now it the project
1:36
will get started. This is a Canva clone
1:38
image and PDF editor.
1:41
You can basically try out before
1:43
purchasing it. So this is
1:46
you can add multiple pages as well if
1:48
you want to duplicate or create a new
1:54
So you also have ability to get images
1:57
from Unsplash. You can search for any
1:59
image. I have integrated the support
2:01
here. You can search for any image third
2:03
party image and drag it in the canvas.
2:05
Then we also can add text here. So you
2:10
have click on create text and the text
2:13
will be added as you can see you can
2:15
place it just change the
2:20
after that to export that you can simply
2:23
go to the menu save as either you can
2:26
save this as an image
2:29
select whatever image file
2:32
and automatically the canvas will be
2:34
saved here you can see that
2:38
you can even export this to a PDF file
2:41
as well. So every page will be converted
2:44
as you can see to a PDF file. So the
2:48
export functionality is also there. We
2:50
also have background here. You can even
2:52
change the background by going to the
2:53
background section. And these are
2:56
different layers here layer base editor.
2:58
So different layers are there. You can
3:00
delete certain elements by having this.
3:06
And we can basically create uh social
3:08
media post of various sizes Instagram,
3:11
Facebook, YouTube. So these are some of
3:13
the presets. You can simply select and
3:18
or you can provide your custom
3:19
dimensions as well. So here you can even
3:24
basically upload your custom images as
3:26
well. Simply select your image
3:33
and click on and the image will be added
3:36
in the canvas. So this is overall Vue.js
3:38
project. If you are interested in
3:40
purchasing it just go to the description
3:42
link and make the payment and after that
3:45
from Google Drive your source code will
3:47
be downloaded. So you can just see here
3:49
each and every component is divided into
3:51
its appropriate Vue.js file here. So
3:55
it's an overall project here. If you
3:57
basically understand the coding, you can
3:59
add also add additional functionalities
4:01
as well once you get the source code. So
4:04
definitely check out this. It's really
4:06
awesome Canva editor. And then first of
4:09
all you can try it out. The demo link is
4:11
available in the description.
