Up next in 10
Build a React.js Canva Clone Image & Photoshop Graphics Editor Using Fabric.js & Chakra UI
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-clone-image-photoshop-graphics-editor-using-fabric-js-chakra-ui-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello friends. Today in this tutorial
0:02
I will basically show you how I built
0:03
you a Canva clone or Photoshop advanced
0:07
image editor inside the browser using
0:09
ReactJS and Chakra UI library and also
0:13
fabric JS library. So it's a advanced
0:15
image editor and let me refresh here.
0:18
And here you can open any of your local
0:20
image files that you want to edit.
0:23
So if I basically select this file here,
0:26
this image file that I selected right
0:28
here. If I want to basically perform
0:31
some of the basic operations such as
0:34
increase the brightness, increase the
0:37
contrast level, decrease it, you can do
0:39
this operations very easily by using
0:41
these sliders which are available.
0:44
Saturation, rotation
0:46
of the images.
0:49
And then we have the if you want to draw
0:52
something on the image, you can also
0:54
draw something on the image. Right here
0:56
there is an pencil icon. You can even
0:59
draw something on the image. You can use
1:01
a color picker here. So you can change
1:04
the color of the like this. Then this is
1:08
actually you can see all this is
1:10
available in uh all of the image editors
1:14
that are available. So then we also have
1:18
eraser as well. So if you want to erase
1:20
something from the image, you can even
1:22
do this also. So it's advanced tool
1:24
here. Similar to Photoshop guys.
1:26
Basically in Photoshop we have this tool
1:28
out there. If you want to delete
1:30
something from the image you can use
1:32
this tool. It can even apply to you can
1:35
see that how it is happening. So
1:38
whatever we drawn something we can even
1:40
delete this as well. So this is your
1:43
eraser tool here. So
1:47
you can do that and then if you want to
1:50
draw something on the you can even draw
1:53
you can see that.
2:00
So as I draw something here you can see
2:02
that we can place this text anywhere
2:04
else. You can see that we can change the
2:06
phone family accordingly. We can even
2:09
change the style as well. The weight
2:12
value you can provide here.
2:16
the size as well. You can change it.
2:19
You can change the background color as
2:21
well and the text color if you want to
2:23
change. So all these things are
2:25
customizable guys. You can just resize
2:27
this.
2:31
So this is the text here. And we can
2:33
even pixelate this image as well. If you
2:35
want to pixelate this image like this,
2:38
you can even do this also.
2:42
Then we have the blur. If you want to
2:43
blur this image something, you can see
2:46
that you can easily blur the image using
2:48
the controls out there. Just select the
2:50
appropriate percentage. So all these
2:53
controls are available in Canva or any
2:55
sort of Photoshop image editor that you
2:57
see right here guys. So we built it
2:59
using fabric JS library which is a uh
3:02
graphics library which is available
3:04
open-source library for JavaScript. This
3:07
is vibrance. This is you can adjust
3:09
noise. You can remove the color as well
3:12
from this. You can see that.
3:16
And then we have uh we can manipulate
3:18
the red, green, blue, gamma. You can see
3:21
that. So then we have uh
3:25
different sort of filters available. So
3:27
all these filters are available. And
3:29
then we come to the next part guys. You
3:31
can rotate images, crop images, scale
3:33
images as well. So if you want to rot
3:35
rotate this image, you can do this as
3:37
well. So you can flip this image as
3:39
well. Uh let me again do this. Open this
3:42
image. Same image.
3:46
So if you want to basically now
3:49
rotate this image at any angle, you can
3:52
rotate this image. And the nice thing is
3:54
that if you want to save this result, we
3:56
have a save button out there. You can
3:58
simply click save. And now your image
4:00
file is saved right here. So the image
4:02
is rotated and it is successfully saved
4:04
out there. You can see that. So this is
4:07
a complete editor guys. If you need the
4:09
full source code of this application,
4:11
the links are given in the description
4:12
of the video. You can directly go to the
4:14
description and purchase the full source
4:16
code at PayPal in United States dollar
4:19
or you can go to stripe and make the
4:21
payment in Indian rupees. So both the
4:23
payment links are given in the
4:24
description of the video. [snorts] And
4:26
let me now show some more
4:27
functionalities here. You can
4:31
apply some more filters out there. Image
4:34
filters. You can see that. So this is
4:35
built built-in filters which will be
4:38
available for all the advanced image
4:40
editors that you see right here. It's a
4:42
grayscale filter. If you want to make
4:44
your image uh black and white. If you
4:47
want to remove all the colors from the
4:49
images, you can apply this grayscale
4:51
filter. It will automatically detect or
4:53
remove all the colors from the images.
4:55
And this is a invert filter. So all
4:58
these famous filters available guys. So
5:01
it's a very handy image editor in the
5:03
browser. You don't need to install any
5:06
sort of third party desktop software to
5:08
do these simple things. You can install
5:10
this uh just make this uh just buy this
5:15
source code and it's a ReactJS
5:17
application. And then we also have the
5:19
functionality if you want to resize your
5:21
images. So if I open that same image,
5:27
so there is a re resize option as well.
5:30
And if you want to do let's suppose
5:34
let me show you first of all the
5:35
cropping functionality. So if you want
5:37
to crop your image any certain part of
5:39
the image you want to crop you can do
5:41
this very easily by using this filter.
5:47
So here you can select the portion that
5:49
you want to select
5:51
and then click uh
5:55
apply and then the image will be
5:57
successfully cropped. Guys, you can even
5:59
go to the previous thing by using these
6:02
undo and redo options as well. So these
6:05
two are handy buttons. If you want to
6:06
redo or undo something. So it's a handy
6:10
buttons. And then we also have the
6:12
scaling part as well. If you want to
6:13
scale the image as well, you can even do
6:16
this also.
6:19
So this is handy buttons out there. If
6:21
you see
6:26
click on apply image is cropped. Click
6:29
on save. So now your image is
6:32
successfully cropped guys. You will see
6:33
that. So in this way you can crop your
6:35
images. And then the thing that I was
6:39
telling you you can even resize your
6:41
images as well. So if I select here some
6:45
other image.
6:48
So now if you want to resize this image,
6:50
let's suppose I select the width to be
6:53
300 and it will scale it will detect the
6:56
height automatically 169. Click on
6:58
apply. So image will be resized with the
7:01
dimensions that you selected. So width
7:04
is 300, height is and you can even
7:08
provide a fixed width and fixed height
7:10
as well.
7:12
Just untick this option. So let's
7:14
suppose
7:22
Go to the resize option and here provide
7:24
500.
7:29
You can see the apply. Click on save.
7:34
So now your image is successfully
7:38
resized. So this is the editor guys and
7:41
uh you can also put it into full screen.
7:44
You have also have the night mode and
7:46
dark mode. And this is the application
7:48
guys. After you purchase the full source
7:50
code, you will get this zip file which
7:51
will actually contain the JSX and the
7:54
ReactJS code for this editor. And if I
7:56
show you the package.json file, we are
7:59
actually using uh fabric.js and also we
8:02
are using Chakra UI for the building the
8:04
UI of the application. So the links are
8:07
given in the description of the video
8:09
guys. If you're interested, you can
8:10
purchase the full source code from
8:12
PayPal or stripe. And uh we are also
8:16
using you can see react framer motion
8:18
which is a library for building UI
8:20
interfaces in react. It's a very handy
8:23
application and we have just first of
8:25
all installed all the modules by using
8:28
npmi and then we started this canva
8:32
clone or advanced Photoshop editor by
8:34
using npm
8:36
rundev. So this will start our dev
8:40
server on local host 3000. This is all
8:43
the code guys for all the files resized
8:45
stickers text. So it's a very handy
8:49
application you can try out on your own
8:51
desktop.
8:53
Just open any image you want to edit and
8:56
then you can draw something as well. You
8:58
can change the brightness, draw
9:00
something. All this stuff is will be
9:02
available. So thank you very much.
9:05
Please hit that like button, subscribe
9:06
the channel and I will be seeing you in
9:08
the next video.