videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a React.js Canva Clone Image Canvas Editor in Browser Using Fabric.js Library in TypeScript
Jan 9, 2025
Buy the full source code of the 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/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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:07
basically talk about a image
0:11
editor that I basically developed inside
0:14
react CH using fabric.js library in
0:18
typescript so this is actually a canva
0:21
clone so you have visited canva which is
0:24
essentially a image editor which allows
0:27
you to actually edit your images so this
0:29
is is a multi-layered uh image editor
0:32
you will
0:33
basically able to select you can clone
0:36
it copy individual Elements by clicking
0:40
this copy button or you can delete
0:42
them like this individually select
0:45
elements in the canvas you will
0:47
basically see right here or copy it we
0:51
have this dpen icon right here to
0:53
actually delete
0:54
this so you can actually add text images
1:01
so it's a complete canva graphics editor
1:04
and
1:05
uh if you basically see there is canva
1:10
you can canvas size you can control here
1:13
basically so if you're developing for
1:16
Instagram or Twitter or YouTube
1:19
thumbnail you can provide a width and
1:22
height you can see automatically it is
1:25
resizing it as I'm providing the width
1:28
and the height so I let's suppose 1280
1:31
by 720 which is a uh YouTube thumbnail
1:35
size then we can manipulate
1:38
our this uh background color of the
1:42
canvas let me pick this blue color and
1:45
uh you can even use some templates you
1:48
can save this template export this as a
1:52
image jpg image so now if you see it has
1:57
been converted to jpg or you can save it
2:00
as PNG SVG as well scalable Vector
2:03
graphic it will open it in the
2:06
browser
2:08
so 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 address
2:18
or you can
2:21
basically take images
2:24
from the you can see that so you can
2:27
basically use the images from your
2:29
computer
2:30
and just resize it and also add some
2:34
text as well so in this way you can add
2:37
some text right
2:43
here so it's a complete react Chase
2:46
project guys if you are interested in
2:48
this
2:48
project the link is given in the
2:51
description you can directly purchase it
2:52
you will actually get a zip file uh this
2:56
will get
2:57
a if you extracted you you will
3:00
basically get this directory structure
3:02
this is a full react Chase project and
3:04
we are simply running it on Local Host
3:07
if you see I'm running it on Local Host
3:10
3000 and uh you can say complete canva
3:14
clone graphics and image editor in this
3:17
it's fully client site no server s side
3:20
code is involved it works directly in
3:22
the browser you can resize everything
3:25
you can change color control the phone
3:27
size you can see with live preview will
3:30
be
3:31
there uh you can basically pick
3:36
phones whatever phone that you want to
3:38
pick right
3:40
here you can control the word spacing as
3:43
well right
3:44
here the line spacing you can even
3:47
control you can change to bold italic or
3:50
underline it everything you can just see
3:54
special effects is also there you can
3:57
even add a stroke
4:01
thickness you can add like this you can
4:05
even have some Shadow as
4:08
well you can see that so these things
4:11
you can add that guys you will see that
4:13
to the
4:16
text so all these things are special
4:18
effects it is
4:23
there so these are Under wavy text you
4:26
will see that so
4:30
then you can control the opacity of this
4:33
you can change the opacity transparency
4:36
then we have if you want to create a
4:39
copy you can basically clone elements
4:42
right you can
4:44
copy clone it or if you want to delete
4:47
them click the dpin icon so actually
4:49
delete it from the canvas then you can
4:51
control the alignment if you want the
4:53
center 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
5:07
location and uh once you are done
5:10
basically you can export this
5:15
thumbnail you can even export this as a
5:18
template if you want to save it for
5:21
future session you can export this as a
5:23
Json template so that 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
5:35
even
5:39
uh we can even load a template like
5:44
this so This template will be
5:47
successfully be loaded so you can even
5:50
export this to a template file and uh
5:53
you can save your work as well and you
5:56
can even export this to a PNG image as
5:58
well you will see that that your
6:00
thumbnail has been successfully exported
6:03
so this is the actual thing guys and the
6:07
link is given in the description you can
6:09
directly purchase this project guys the
6:11
link is given canva clone and this is
6:14
you can see all these things are coded
6:17
inside react CHS if I show you the
6:20
package.json file we are actually using
6:23
fabricjs Cropper JS fabricjs is
6:27
essentially a uh graphics library of
6:30
JavaScript it's open-source
6:33
library of JavaScript which makes it
6:35
easy for working with canvas and
6:39
Graphics in JavaScript so it's
6:41
open-source
6:43
Library so it's free for everyone so we
6:46
are using this library in the background
6:49
it's HTML 5 canvas Library which makes
6:51
it easy for doing these things with the
6:55
canvas how to make this thumbnail editor
6:59
right in the browser itself so now if
7:02
you want to crop this image we can even
7:05
crop this image as well simply select
7:07
the size you can change the aspect ratio
7:10
9 by 16 4x3 so we are using Cropper JJs
7:14
for this so once you resize it your
7:16
image will be resized you can even
7:18
resize the image in the editor in the
7:21
canvas as well you can even add frames
7:25
as well like
7:28
this change the the thickness so you can
7:30
basically add these beautiful frames you
7:32
can basically control the roundness if
7:35
you want to round the frames these are
7:38
different frames which are available
7:40
which you can add to the
7:44
images like this if you want to flip the
7:48
image horizontally you can do that or if
7:51
you want to delete this you can simply
7:54
click the delete option and there is
7:56
also a redo option as well undo and redo
8:00
if you want to undo the things that you
8:02
have done so click on this undo button
8:04
so it will undo everything that you have
8:07
done so these are uh useful buttons
8:10
because if you AC accidentally deleted
8:12
some work you can simply click these
8:14
buttons to actually recover your work so
8:17
these are redo button and undo buttons
8:20
available this makes it very much easy
8:22
for doing this so if you click this
8:25
button you can drag your canvas at any
8:27
location so there is a button available
8:29
for you to actually select the canvas
8:31
and drag and drop anywhere location so
8:36
simply select that if you want to clear
8:39
the canvas simply click this option so
8:40
it will say confirm to clear the canvas
8:43
and clear the historical operation
8:45
records click on confirm and all the
8:47
things will be deleted and you will be
8:49
able to start from a clean slate if you
8:52
want to you can't do redo so just make
8:56
sure that you don't press this button
8:58
until unless you want want to confirm
9:00
and delete all everything this is
9:02
actually a delete button which will
9:04
actually confirm all and delete
9:06
everything from the canvas so just make
9:09
sure that you don't hit this button
9:11
accidentally and
9:13
uh you can see that so it's a fully
9:17
freshed editor guys you can basically
9:19
make awesome thumbnails without youing
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
9:40
interested you can export them to actual
9:44
image files you will see that jpg PNG
9:46
SVG 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
9:58
color like is you can see how it is
10:01
looking and then we have various brushes
10:04
also available to us guys we can use the
10:06
pencil if you want to edit this
10:09
thumbnail simply draw
10:11
something you can basically use this
10:14
pencil you can increase the line
10:20
width these are the pencil brushes
10:22
available for us we can change this to a
10:24
red marker you can change this by using
10:27
Color pickle you can select any color
10:29
color of your choice for your
10:31
brush
10:35
and like this if you want to also add
10:39
some Shadow you can even add some
10:43
Shadow can see that so all the things
10:46
are available guys if you are interested
10:48
in 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:02
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 can
11:09
see that how beautiful this looking can
11:13
undo the operation to actually undo
11:16
everything and uh this is all about this
11:19
and then we have various safe shapes if
11:22
you want to add some shapes as well if
11:25
you want to add some lines this is also
11:27
available
11:32
you can add some shapes here right
11:38
here so shapes are very much necessary
11:41
guys because if you're developing some
11:43
thumbnails this is
11:45
necessary because uh you can see that it
11:49
basically adds some flavors to the
11:51
thumbnail so these shapes are necessary
11:54
you can enter your hexadecimal color
11:57
code to actually do this shap shapes
11:59
makes it very much easy to design
12:01
thumbnails so various shapes are
12:03
available you can see if you have some
12:06
design knowledge you can be able to
12:08
design some awesome
12:10
thumbnails so various shapes are there
12:13
hand return as well you can see
12:17
that so all these shapes we are using
12:20
fabric JS to design everything guys that
12:23
we did right here you can see that all
12:26
these shapes are coming from fabric JS
12:28
which is a Graphics library that I
12:30
already showed you it basically contains
12:32
all these patterns shapes uh brushes all
12:35
these things for uh drawing graphics
12:38
editor and uh then we have multiple
12:42
layers it's a multi-layered image editor
12:45
so everything that you add in the canvas
12:47
had a layer associated with it so you
12:49
can basically individually select
12:50
Elements by you can see that so this is
12:53
a text this is Arrow this is shape so
12:55
everything that you add in the canvas
12:57
has a specific layer as attached to it
13:00
similar to photoshop that you use
13:02
Photoshop is a multi-layered image
13:04
editor so every asset that you add in
13:07
the canvas has a associative layer
13:09
associated with it so by which you can
13:13
individually control properties of each
13:15
Elements by using clicking on that
13:17
individual element in the layer you can
13:19
just see so please hit that like button
13:22
guys if you are liking the content and
13:24
if you interested in this uh uh image
13:27
editor the link is given it is similar
13:29
to canva 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:35
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
react CH which makes use of croper GS
13:45
and fabric GS so if you're interested
13:49
guys the link is given and uh thank you
13:52
very much for watching this video you
13:54
can even add emojis as well you can see
13:56
that emoji picker is out there thank you
13:59
very much for watching this video and I
14:01
will be seeing you in the next uh live
14:04
stream
#Design
#Programming
#Multimedia Software