Up next in 10
Build a React.js Canva Clone Image Canvas Editor in Browser Using Fabric.js Library in TypeScript
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-clone-image-canvas-editor-in-browser-using-fabric-js-library-in-typescript/
Show More Show Less View Video Transcript
0:04
Uh hello guys, welcome to this live
0:06
stream. So in this live stream I will
0:08
basically talk about a image editor
0:12
that I basically developed inside
0:14
ReactJS using fabric.js library in
0:18
Typescript. So this is actually a Canva
0:21
clone. So you have visited Canva which
0:24
is essentially a image editor which
0:26
allows you to actually edit your images.
0:29
So this is a multi-layered uh image
0:31
editor. You will basically
0:34
able to select you can clone it, copy
0:38
individual elements by clicking this
0:40
copy button or you can delete them
0:43
like this. Individually select elements
0:45
in the canvas. You will basically see
0:47
right here or copy it. We have this dust
0:51
pin icon right here to actually delete
0:54
this.
0:55
So you can actually add text images.
1:02
So it's a complete Canva graphics editor
1:04
and uh
1:06
if you basically see there is uh Canva
1:10
you canvas size you can control here
1:13
basically.
1:14
So if you're developing for Instagram or
1:17
Twitter or YouTube thumbnail you can
1:20
provide a width and height. You can see
1:23
automatically it is resizing it as I'm
1:27
providing the width and the height. So I
1:29
let's suppose 1280 by 720 which is a uh
1:34
YouTube thumbnail size. Then we can
1:37
manipulate our
1:39
this uh background color of the canvas.
1:43
Let me pick this blue color. And uh you
1:46
can even use some templates. You can
1:49
save this template, export this as a
1:52
image, JPG image. So now if you see it
1:56
has been converted to JPG or you can
1:59
save it as PNG, SVG as well, scalable
2:03
vector graphic. It will open it in the
2:05
browser.
2:07
So
2:09
now what we can do, we can add a local
2:11
image or we can even add a remote image
2:13
as well. If you want to add images from
2:16
internet, you can basically enter
2:18
address or you can basically
2:22
take images from the
2:26
you can see that. So you can basically
2:28
use the images from your computer and
2:31
just resize it and also add some text as
2:35
well. So in this way you can add some
2:37
text right here.
2:44
So it's a complete ReactJS project guys.
2:46
If you are interested in this project,
2:49
the link is given in the description.
2:51
You can directly purchase it. You will
2:53
actually get a zip file. Uh this will
2:56
get a if you extract it, you will
3:00
basically get this directory structure.
3:02
This is a full ReactJS project and we
3:04
are simply running it on localhost. If
3:07
you see I'm running it on localhost 3000
3:11
and uh you can it's a complete Canva
3:14
clone graphics and image editor in it's
3:18
fully client side no server side code is
3:20
involved it works directly in the
3:23
browser you can resize everything you
3:26
can change color control the phone size
3:28
you can see with live preview will be
3:30
there
3:32
and you can basically pick fonts
3:37
whatever phone that you want to pick
3:38
right here.
3:41
You can control the word spacing as
3:43
well. Right here,
3:45
the line spacing you can even control.
3:48
You can change to bold, itallic or
3:50
underline it. Everything you can just
3:53
see. Special effects is also there. You
3:57
can even add a stroke
4:01
thickness. You can add like this. You
4:05
can even have some shadow as well.
4:09
You can see that. So these things you
4:11
can add that guys. You will see that to
4:13
the text.
4:17
So all these things are special effects.
4:19
So it is there.
4:24
So these are under wavy text. You will
4:26
see that. So
4:30
then you can control the opacity of
4:33
this. You can change the opacity,
4:35
transparency. Then we have if you want
4:38
to create a copy,
4:40
you can basically clone elements, right?
4:42
You can copy
4:45
clone it or if you want to delete them,
4:47
click the desk icon. So actually delete
4:49
it from the canvas. Then you can control
4:52
the alignment. If you want the center,
4:54
left, right, horizontally, you can
4:57
control it by using these buttons to
4:59
actually align the elements perfectly in
5:01
the canvas or you can control the mouse
5:03
directory to place the element at a
5:06
specific location.
5:08
And uh once you are done basically you
5:12
can export this thumbnail.
5:16
You can even export this as a template
5:19
if you want to save it for future
5:22
session. You can export this as a JSON
5:24
template. So that uh if you are done
5:28
with this work, if you are opening this
5:30
application for a incognito window, if
5:33
your friend is opening, they can even uh
5:40
we can even load a template like this.
5:45
So this template will be successfully be
5:48
loaded. So you can even export this to a
5:51
template file and uh you can save your
5:54
work as well and you can even export
5:57
this to a PNG image as well. You will
5:59
see that your thumbnail has been
6:01
successfully exported. So this is the
6:05
actual thing guys and the link is given
6:08
in the description. You can directly
6:10
purchase this project guys. The link is
6:12
given Canva clone and this is you can
6:14
see all these things are coded inside uh
6:18
ReactJS. If I show you the package
6:20
dojson file we are actually using
6:23
fabricjs cropper js. Fabric js is
6:27
essentially a uh graphics library of
6:30
JavaScript. It's a open-source library
6:34
of JavaScript which makes it easy for
6:37
working with canvas and graphics in
6:40
JavaScript. So it's a open-source
6:42
library.
6:44
So it's free for everyone. So we are
6:47
using this library in the background.
6:49
It's HTML 5 canvas library which makes
6:51
it easy for doing these uh things with
6:55
the canvas. how to make this thumbnail
6:58
editor right in the browser itself. So
7:01
now if you want to crop this image, you
7:05
can even crop this image as well. Simply
7:07
select the size, you can change the
7:09
aspect ratio 9x6, 4x3. So we are using
7:13
cropper.js for this. So once you resize
7:16
it, your image will be resized. You can
7:18
even resize the image in the editor in
7:21
the canvas as well. You can even add
7:25
frames as well like this.
7:29
Change the thickness. So you can
7:30
basically add these beautiful frames.
7:32
You can basically control the roundness
7:35
if you want to round the frames. These
7:38
are different frames which are available
7:40
which you can add to the images
7:45
like this.
7:47
If you want to flip the image
7:49
horizontally, you can do that. Or if you
7:51
want to delete this, you can simply
7:54
click the delete option. And there is
7:57
also a redo option as well. Undo and
7:59
redo. If you want to undo the things
8:01
that you have done, so click on this
8:03
undo button. So it will undo everything
8:06
that you have done. So these are uh
8:09
useful buttons because if you
8:11
accidentally deleted some work, you can
8:14
simply click these buttons to actually
8:15
recover your work. So these are redo
8:18
button and undo but buttons available.
8:21
This makes it very much easy for doing
8:23
this. So if you click this button you
8:26
can drag your canvas at any location. So
8:28
there is a button available for you to
8:30
actually select the canvas and drag and
8:33
drop anywhere location. So simply select
8:36
that. If you want to clear the canvas
8:39
simply click this option. So it will say
8:41
confirm to clear the canvas and clear
8:43
the historical operation records. Click
8:46
on confirm and all the things will be
8:48
deleted and you will be able to start
8:50
from a clean slate if you want to you
8:54
can't do redo. So just make sure that
8:56
you don't press this button until and
8:58
unless you want to confirm or delete all
9:01
everything. This is actually a delete
9:03
button which will actually confirm all
9:05
and delete everything from the canvas.
9:07
So just make sure that you don't hit
9:10
this button accidentally and u
9:14
you can see that. So it's a fully fresh
9:18
editor guys. You can basically make
9:20
awesome thumbnails without using
9:22
Photoshop or any other editor. It's a
9:25
fully client side Canva clone which
9:27
makes it easy for you to actually design
9:30
your thumbnails for your YouTube videos
9:32
or social media things. So you can
9:35
purchase it. The link is given in the
9:37
description if you are interested.
9:41
You can export them to actual image
9:44
files. you will see that JPG, PNG, SVG
9:47
or template or you can even copy to
9:49
clipboard as well. If you want to paste
9:52
this image somewhere else and uh you can
9:55
change the text color
9:59
like this. You can see how it is looking
10:02
and then we have various brushes also
10:04
available to us guys. We can use the
10:06
pencil. If you want to edit this
10:09
thumbnail, simply draw something.
10:12
You can basically use this pencil. You
10:15
can uh increase the line width.
10:21
These are the pencil brushes available
10:22
for us. We can change this to a red
10:25
marker. You can change this by using
10:27
color pickle. You can select any color
10:29
of your choice for your brush.
10:32
And uh
10:36
like this. If you want to also add some
10:39
shadow, you can even add some shadow.
10:44
Can see that. So all the things are
10:46
available guys. If you are interested in
10:48
this, you can directly purchase it. You
10:50
will actually get this full source code.
10:52
You can basically start this application
10:54
on local host or you can deploy this as
10:56
well by building it npm run build. So
10:59
just you need to install this npm run
11:01
start this command. You just need to
11:03
execute and this will actually start
11:04
this locally inside local host 3000. I'm
11:07
running it in the browser itself. You
11:09
can see that how beautiful this looking.
11:12
Can
11:13
undo the operation to actually undo
11:15
everything.
11:17
And uh this is all about this. And then
11:20
we have various safe shapes. If you want
11:23
to add some shapes as well, if you want
11:25
to add some lines, this is also
11:28
available.
11:32
You can add some shapes here right here.
11:39
So, shapes are very much necessary,
11:41
guys, because if you're developing some
11:43
thumbnails, this is necessary
11:46
because uh you can see that it basically
11:49
adds some flavors to the thumbnail. So
11:52
these shapes are necessary. You can
11:55
enter your hexadesimal color code to
11:57
actually do this. So shapes makes it
12:00
very much easy to design thumbnails. So
12:02
various shapes are available. You can
12:05
see if you have some design knowledge,
12:07
you can be able to design some awesome
12:09
thumbnails.
12:11
So various shapes are there handwritten
12:13
as well. You can see that.
12:18
So all these shapes we are using
12:20
fabricjs to design everything guys that
12:23
we did right here. You can see that all
12:26
these shapes are coming from fabricjs
12:28
which is a graphics library that I
12:30
already showed you. It basically
12:32
contains all these patterns, shapes, uh
12:34
brushes, all these things for uh drawing
12:37
graphics editor and uh then we have
12:42
multiple layers. It's a multi-layered uh
12:44
image editor. So everything that you add
12:46
in the canvas had a layer associated
12:48
with it. So you can basically
12:49
individually select elements by you can
12:52
see that. So this is a text this is
12:54
arrow this is shape. So every thing that
12:56
you add in the canvas has a specific
12:58
layer attached to it similar to
13:00
Photoshop that you use. Photoshop is a
13:03
multi-layered image editor. So every
13:06
asset that you add in the canvas has a
13:08
associative layer associated with it. So
13:11
by which you can individually control
13:14
properties of each elements by using
13:16
clicking on that individual element in
13:18
the layer you can just see. So please
13:21
hit that like button guys if you are
13:22
liking the content and if you are
13:24
interested in this uh uh image editor
13:28
the link is given it is similar to Canva
13:30
clone which is there. If you're
13:32
interested in purchasing it the link is
13:34
given you can directly purchase it. You
13:36
will get a zip file after you make the
13:37
payment from my website and this will be
13:39
the directory structure. All the source
13:41
code will be there. It is coded inside
13:43
ReactJS which makes use of proper JS and
13:46
fabric JS. So if you're interested guys
13:49
the link is given and uh thank you very
13:53
much for watching this video. You can
13:55
even add emojis as well. You can see
13:56
that emoji picker is out there. Thank
13:59
you very much for watching this video
14:01
and I will be seeing you in the next uh
14:04
live stream.