Up next in 10
Build a React.js Canva Clone to Build Image & Video Editor Using Fabric.js & Canvas in Browser
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-clone-to-build-image-video-editor-using-fabric-js-canvas-in-browser/
Show More Show Less View Video Transcript
0:03
Uh hello friends today in this uh
0:05
tutorial in this live stream I will
0:07
basically share a new application that I
0:10
built.
0:12
This is basically a reacts
0:16
Canva clone. Canva as you all know guys
0:19
it's a alternative to Photoshop
0:21
basically if you want to develop any
0:23
sort of thumbnail for your YouTube video
0:26
or it it is also a video editor as well.
0:30
So all the functionalities that you see
0:32
in canva.com it is also available inside
0:35
this application. You will see basically
0:39
you can customize you can change the
0:40
background color. So we have this uh
0:43
widgets which are there templates
0:46
customize elements you can also have
0:49
images as well. You can select images
0:51
you can embed images right here also you
0:53
can see that
0:55
and you can even delete the scene here.
0:57
So basically this is a timeline here. We
1:01
also have this timeline where you can
1:03
create pages here. You can delete the
1:05
scenes from here or you can add a new
1:07
scene by clicking the pencil icon. You
1:10
can also increase the zoom level if you
1:12
want to work here like this.
1:18
And let's suppose I want to add some
1:21
text here. So there is a button out
1:24
there add text. So here you can
1:26
basically add some button here. Let's
1:28
suppose I add some text here.
1:30
JavaScript.
1:34
So this is very handy tool guys if you
1:36
want to design some thumbnails.
1:41
You can resize it accordingly
1:44
to design your thumbnail. And then guys,
1:47
you can basically go to your uh
1:51
graphics. You can also upload some
1:53
graphics from your computer. Let's
1:55
suppose uh I
1:58
want to uh have some
2:07
let me select. So you can even change
2:10
the background color. Let's suppose if
2:11
you want to change your
2:14
if you want to embed a image, you can
2:16
embed a image right here also. This is a
2:19
user uploaded image.
2:24
And uh also basically you can uh put the
2:28
elements. These are the predefined
2:30
elements which are there.
2:34
And also guys
2:36
we have basically customized you can
2:38
change the background color accordingly
2:41
whatever background and then you can
2:43
select this text here you can even
2:45
change the text color to white color
2:47
let's suppose
2:51
you can even underline click the
2:54
underline so it will change to underline
2:56
here you will see that you can resize it
2:58
accordingly. So if you want to design a
3:01
basic thumbnail, very quick little
3:03
thumbnail you can change, you can uh
3:06
just choose any font that you want here.
3:09
So you can choose it and all we are
3:12
doing it using ReactJS guys. Let me show
3:15
you the code here. This we have built
3:17
this entire project inside TypeScript.
3:19
So it is a offline editor. It doesn't
3:22
require internet. So if you don't
3:24
require internet then it's a very good
3:26
option. Basically you can design your
3:28
thumbnails. All these options are there.
3:31
Right click. If you right click it,
3:33
these menu will appear. Basically there
3:36
are lots more options. Every option
3:38
which Canva supports. We have the copy
3:40
option. You can paste it. So this will
3:43
be duplicated. Here you can see that you
3:45
also have uh the if you want to have set
3:49
[clears throat] this as a backward you
3:52
can change the visibility to backward.
3:54
So if you go to the layers option you
3:56
will basically see you can even change
3:59
the opacity here of the text here you
4:02
can see that you can control the opacity
4:04
here of the text like this.
4:09
So in this way guys you can control
4:11
everything and then if you want to bring
4:14
forward you can bring the image forward.
4:25
So any image you can choose guys
4:27
basically these are the predefined
4:30
images which are there and uh
4:34
also you can import the images from
4:36
Pixabay as well. I'm not currently
4:38
connected to internet but still you can
4:41
uh
4:44
fetch the images from the internet. So
4:47
this is a really good option how we can
4:49
do that. You can also do it like this.
4:51
And now the
4:53
if you want to download this image how
4:55
we can do that
4:57
we can basically click this
5:00
icon and this will you can right click
5:03
save this image inside your machine. So
5:05
this image will be downloaded. you will
5:07
see that. So,
5:09
so now you can simply make this uh image
5:13
for your YouTube thumbnail. Let's
5:15
suppose any thumbnail you are designing.
5:18
So, the nice thing about this software
5:20
guys basically uh let me show you
5:24
uh
5:27
if you launch this application ReactJS
5:30
application the link is given here.
5:32
Basically uh if you see
5:37
uh you need to basically first of all go
5:39
to the command line just type npmi. So
5:43
this will basically
5:45
install all these modules npmi d-force.
5:49
So you need to write here d-force to
5:52
basically install all the dependencies
5:55
and then you need to simply run this
5:57
application by invoking a command which
5:59
is npm rundev.
6:02
So this will run your local server on
6:05
5173 port number. So [snorts] this will
6:08
start this application you will see. So
6:10
as you start this basically you can even
6:13
create a presentation graphic or video.
6:15
You can also create a video as well. So
6:17
there will also be a video timeline
6:20
which will be appearing right here. If
6:21
you see you can create some more scenes
6:24
out there. And here you can create one
6:27
scene. This is the first scene that you
6:29
can create. Here
6:33
you can have one more image.
6:37
Now you can preview your video. Click
6:38
the preview icon. So basically it will
6:41
generate the preview of the video. I'm
6:43
currently not in connected to the
6:45
internet. So that's why if you see there
6:48
is not uh it is not generating the
6:50
preview but uh if you're connecting to
6:54
internet then it will generate the
6:56
preview and then you can download your
6:58
video. So it's a video editor as well.
7:00
So
7:03
now guys you can also create the
7:05
graphics. So you can create basically
7:08
you can uh control
7:11
if you go to this customize option and
7:13
there is basically this button out there
7:15
which is resize template. You can choose
7:19
uh either if you are designing a face uh
7:22
various options are there Twitter post,
7:24
Facebook event cover, YouTube channel
7:26
art, YouTube thumbnail, Facebook cover,
7:29
Facebook post, Instagram post,
7:31
presentation, social media. You can also
7:34
provide a custom size as well. So 500 by
7:37
let's suppose 700. You can also provide
7:41
a custom size as well or you can
7:43
basically preset you can YouTube channel
7:46
art. So every preset is supported guys.
7:49
So you can uh individually basically
7:53
it's a very handy tool to have.
7:57
So if you want to do this uh the link is
8:00
given guys you can basically
8:03
get the full source code. The link is
8:05
given in the description of the video of
8:07
this live stream. So you can basically
8:09
clone this project and uh run this on
8:13
your local machine if you want to or you
8:15
can deploy this inside the website. So
8:17
it's a fullyfledged image and video
8:19
editor inside ReactJS. And now let me
8:22
show you the directory structure of the
8:23
project. So here we are using if you go
8:26
to package.json file we are using the
8:33
fabricjs library guys fabricjs if you
8:36
don't know it's a image
8:39
framework for javascript. So fabricjs we
8:43
are using for developing this
8:44
application. So it's a canvas library
8:48
fabric js. So we are using fabricjs to
8:50
develop this uh application. So
8:55
inside reacts. So this is basically the
8:58
application guys. If you are interested
9:00
the link is given in the description of
9:02
the video. You can check out the source
9:04
code
9:08
and basically do this. So
9:11
thank you very much for watching this
9:12
video.