Up next in 10
Build a React.js FFMPEG Canva GIF Image & Video Editor Clone Using Fabric.js & Gifshot in Javascript
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-canva-gif-image-video-editor-clone-using-fabric-js-gifshot-in-javascript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I will show you basically
0:04
a Canva clone GIF editor that I
0:07
developed inside ReactJS. This is the
0:10
application that we will be building in
0:13
this tutorial. I will show you this is
0:14
the actual project that I built right
0:16
here. And this allows you to actually
0:19
edit your in your GIF files similar to
0:22
Canva. Canva is actually a very popular
0:26
editor website and we basically make a
0:29
clone of it which have most of the
0:31
features. It is you can edit the speed
0:34
of the GIF animation. So here you need
0:35
to first of all select your GIF
0:37
animation and let me select
0:41
this GIF animation which is 6 MB. As I
0:44
select this basically the file is
0:47
selected and you just need to wait
0:50
depending upon the size of the GIF
0:51
animation. So when the GIF animation
0:54
will successfully load, it will show you
0:56
on the left hand side. You will see now
0:58
the GIF animation is playing right here.
1:01
So this uh application encapsulates you
1:04
will see you will the user will see the
1:07
live preview of the GIF animation as you
1:10
are editing it. Now you can actually
1:12
change the speed of the GIF animation.
1:14
If you decrease it using this slider,
1:17
the speed will decrease. And now you can
1:19
see automatically it updates and it just
1:22
shows shows you the animation speed
1:25
right here. You can control it by this
1:27
slider. If you increase the value of the
1:29
slider then the speed of the GIF
1:31
animation will increase. As you can see
1:33
that this the speed is increasing. So
1:36
you can just in real time you can
1:38
control the speed right here in this you
1:40
very awesome application that I
1:42
developed and this I used fabricjs and
1:45
uh I used a open-source library gifshot
1:49
I will show you all the dependencies
1:51
that I used for this project. So you can
1:53
see you can control this the speed of
1:55
the GIF animation using this slider and
1:57
it will automatically update on the left
2:00
hand side where the GIF animation will
2:02
say and [snorts] uh also you can play it
2:05
in reverse order as well by selecting
2:07
this by playback effect. So now the GIF
2:10
animation will play in the reverse
2:12
order. So you can customize all these
2:14
things guys. You can increase the speed.
2:16
You can reverse the GIF animation. And
2:18
then you if you want to compress the
2:20
size of the GIF animation, then you can
2:22
select the quality of the GIF animation
2:24
240, 360p, 720 or original image size.
2:29
So you can also compress the size as
2:31
well. So let's suppose I want to
2:32
compress the size. So I will select 240.
2:35
And then you can select the image
2:37
quality, standard quality, compression,
2:40
high quality, high definition, original
2:43
picture. So if I select compression
2:45
here, it will compress the size.
2:48
And [snorts] uh let me select this to
2:53
this one. And there is a button out
2:55
there which lets you export this GIF
2:57
animation. Since I click this, so it
3:00
will basically export the frames and it
3:03
will show you this progress bar. Once it
3:05
is completed, it will now export this.
3:08
You can simply download this and it will
3:11
download this as a particular location.
3:13
So we can save this. So you can see it
3:16
has been reduced to 3.5 MGB.
3:19
The original size were 8 MB. So you can
3:22
play this now. You can see the GIF
3:26
animation is slightly compressed and the
3:28
size has been reduced and it is playing
3:30
in the reverse direction. So in this way
3:33
guys you can edit your GIF files very
3:36
easily and we have various effects. You
3:39
can write text as well on the GIF
3:41
animation. So there is a second option
3:44
right here. GIF filter. So there are
3:46
various filters that you can apply here.
3:49
This is the actual original picture GIF
3:52
animation. So if I want to change it to
3:53
black and white, we can change to black
3:55
and white GIF animation. You will see in
3:57
real time the picture has been changed
4:00
to black and white this GIF video.
4:05
Similarly, high contrast. All these
4:06
filters are pre-built by me. And you can
4:09
see that if you want the brightness,
4:11
dark,
4:12
reverse color, you will see that. So all
4:16
these filters are pre-built inside this
4:18
editor. So if you need this uh
4:20
application guys uh full editor, the
4:23
link is given. You can directly purchase
4:25
the full source code and uh this is
4:28
entirely built in ReactJS. So we are you
4:30
can see after you purchase it, you will
4:32
uh get a zip file from Google Drive. You
4:35
can actually extract the content of this
4:37
zip file. you will get this directory
4:38
structure which will actually contain
4:40
all the source code for this project and
4:42
uh now you can see that we are running
4:46
this project on localhost 8000. So we
4:50
are running locally and all these
4:53
filters are available here. You can see
4:55
that blur filter, this is a noise
4:57
filter, threshold filter, nostalgia
4:59
filter, inverse filter. So this makes it
5:04
very much easy. If you have seen these
5:06
uh GIF animations on the internet having
5:09
various filters applied to it. So then
5:13
we have got the next section called as
5:15
text animation. So now if you add to
5:17
want to add some text on the GIF
5:19
animation. Let's suppose right here I
5:21
will simply write cat
5:27
coding. So we can just add this and we
5:31
can even add some animation to this
5:33
text. You can see that this is a zoom
5:36
animation or we can add a flash
5:38
animation like this or a jitter
5:41
animation like this. So these animations
5:45
you will not see on Canva guys Canva
5:47
website but I built this using scratch
5:50
using fabricjs and all those awesome
5:53
animation libraries. You can see the
5:55
gradients as well. So whichever
5:57
animation that you like
6:00
if you want to export that. So it will
6:03
export this animation depending upon how
6:06
much filters that you have applied. You
6:08
just need to wait for the animation to
6:10
complete. And now you can simply
6:12
download your GIF file with the modified
6:14
changes. And now if you open this now
6:18
your GIF file it will now have this uh
6:22
awesome little filter applied to it. It
6:24
has been changed to black and white and
6:26
also the text is appearing with uh is
6:29
flashing animation. So it looks really
6:31
good guys. If you want to share these
6:33
gift animations on social media, it will
6:35
viral. It will go viral as well. Uh it
6:37
will get a lot of views as well. So it's
6:40
a you can get this editor. The link is
6:42
given. You can directly purchase the
6:44
full source code and you can even deploy
6:46
this editor inside your own website.
6:49
After purchase you will get full
6:51
commercial rights. You can use this
6:52
editor and uh you can put advertisements
6:56
and earn revenue using Google AdSense as
6:59
well. You can just place an
7:01
advertisement just before the editor
7:03
after the editor. And you have seen
7:05
websites like this on the internet very
7:08
few. So I just developed this editor for
7:10
you. If you are interested you can do
7:12
that. You can even delete that as well
7:13
by clicking the delete option. You can
7:15
add multiple text as well. If you want
7:17
to add another text right here, you can
7:19
change the color by using color picker.
7:22
You can see that the color will change
7:25
right here. You can change the color.
7:29
So, as you select
7:32
the color will change right here. You
7:34
will see that. So,
7:39
so you can add multiple text. So, this
7:42
will have this animation, jitter
7:44
animation. This has this flashing
7:46
animation. So you can even change fonts
7:49
as well guys. Various languages are
7:50
supported. You can see that
7:56
sans surf. You can even upload your own
7:59
custom phone guys. Let's suppose you are
8:01
uh want to use a custom phone. You can
8:04
just go to Google phones and you just
8:06
need to upload your TTF file. So
8:09
whichever phone that you want, you can
8:11
download that phone TTF file. So,
8:17
so if you want to use this font, we need
8:20
to uh download a TTF file.
8:27
So, just extract
8:34
this TTF file. You will see it will be
8:37
there. So now inside this uh editor you
8:40
can simply upload your TTF file
8:46
just select that loading successful. So
8:49
now you can see it has been added your
8:51
custom font has been added guys you will
8:53
see that so you can use any custom font
8:55
of your language. Go to Google phones
8:57
and if you're living in any country you
9:00
need to use your own native phone. You
9:02
can even use that notify phone. There is
9:03
an option right here to actually upload
9:06
your local phone. So it will get added.
9:08
You can see that. So it is very easy
9:10
guys. You can place it anywhere else.
9:12
You can just place it. You can increase
9:15
the size, decrease the size. If you just
9:17
want to add a watermark image, you there
9:20
is an also an option. If you want to
9:21
copyright your gift animation, there is
9:23
a second action sticker. You can add
9:25
some stickers. Pre-built stickers are
9:27
also available. You can add these
9:29
stickers.
9:30
So these are pre-built. And inside the
9:33
application, there is an a directory
9:35
called as static. You can basically
9:37
upload some more custom stickers of your
9:40
own. You can just delete add custom
9:43
stickers.
9:44
Just select it and delete this or you
9:47
can upload your own images that you want
9:49
to do.
9:51
If you want to add your own images, you
9:53
can even add this overlay like this.
9:58
Just a simple watermark. You can add
10:00
this. And uh now just need to export
10:03
that. So you will see it will now export
10:06
your GIF animation. So by this awesome
10:08
little progress bar. So it's a nice
10:11
little application guys. And now you can
10:13
save your GIF animation anywhere on your
10:17
so you will see the image will also
10:19
appear as a watermark. And this is
10:21
actual various
10:24
you can just customize that. I'm not
10:26
good at designing. So
10:29
it uh you can anyway you can design your
10:32
GIF animations and then you can actually
10:36
export them and uh you can compress this
10:40
as well. I showed you you can increase
10:42
the speed of the GIF animation as well.
10:44
Decrease this GIF animation speed like
10:47
this
10:52
playbacks normal. If you want to have
10:55
original size the original picture as
10:58
well. So it will not be compressed. Now
11:00
if you export that the GIF animation
11:03
will remain the same same. It will not
11:05
be compressed. It will be staying at its
11:08
original picture. That's why it is
11:10
taking a lot of time. You can see that
11:12
uh earlier on it was uh compressed so it
11:16
was taking less time. So depending upon
11:18
your GIF animation size it will take uh
11:20
time. You just need to wait after 100%
11:23
it will export your GIF animation so
11:24
that you can download your GIF animation
11:26
inside your directory. So this is actual
11:31
editor guys. Canva clone kind of an
11:33
editor especially for GIF files. If you
11:35
are interested the link is given in the
11:36
description of the video you can
11:37
directly purchase it. After purchasing
11:39
it you will get a zip file. You just
11:41
need to extract the uh files and then
11:45
simply run the command npm run start. It
11:47
will start this at a locally inside your
11:49
development server this application and
11:52
you can run it inside the browser. And
11:54
the main benefit of running this
11:56
application guys it's entirely coded in
11:58
JavaScript reacts and it is totally
12:01
client side. So no server no serverside
12:03
code is involved. So entire code is in
12:07
JavaScript. So so the entire application
12:11
works in the browser. You don't need any
12:13
third party library. You don't need any
12:15
third party software. It works in
12:17
entirely in the browser. So it it works
12:21
very efficiently. So you can see we are
12:23
running it on localhost 8,000 and no
12:26
server is running. It is entirely
12:28
working in the
12:31
uh browser. So now I'll let me show you
12:33
the code guys what you will get after
12:36
you do this. So let me show you actual
12:38
dependencies that we are using for this.
12:40
So as you can see we are using React
12:45
framework
12:47
and then we are also using fabric JS
12:50
which is a anime uh canvas library which
12:54
allows you to export your canvas to
12:59
video. This is a very good library
13:01
fabric JS open source JavaScript
13:03
library. And then we are using Gifshot
13:05
and lib gif. These are two open source
13:07
libraries. If you just search for first
13:09
of all fabric JS it's a canvas library
13:12
for JavaScript and uh
13:18
so it's a open-source library
13:21
so this library is free and uh it's open
13:25
source and many opensource animation
13:27
related projects are made based upon
13:29
this library so I used this library and
13:32
the second one I used which is uh
13:36
lib gifs
13:38
which is a it's again a library for
13:41
passing the GIF and image data. So it
13:45
has uh it's a NodeJS module which is
13:48
1,53
13:49
weekly downloads. So we use this and
13:53
also we use this package which is GIF
13:55
short. It's a you can search these all
13:59
these packages right here.
14:02
So it's a JavaScript library that can
14:04
create animated gifts from video streams
14:07
such as webcam. So we are using this
14:10
package which is 2441 weekly downloads.
14:14
So it's a good library and it allows you
14:16
to create your GIF animations from
14:18
videos. So we are actually using this
14:21
library inside our project to actually
14:25
uh show the GIF animation live preview.
14:28
as you basically make the changes, we
14:30
are actually updating the GIF animation
14:32
based upon the changes that you make
14:34
inside the editor. So all these
14:38
libraries are interlin to actually
14:40
create this awesome project that you see
14:42
in the browser and uh
14:46
and for the UI we are actually using
14:48
this uh ant which is a UI framework for
14:51
ReactJS for actually building this
14:53
application. So this is all guys for the
14:56
dependency section and uh coming to the
14:59
source code we have different
15:00
components. First we have canvas. This
15:03
is the editor uh main editor component.
15:08
We have this it is coded in typescript
15:11
not uh it's a super a supererset of
15:14
javascript with additional features such
15:17
as compilation type checking. So,
15:20
TypeScript is similar to JavaScript, but
15:22
it's a supererset. So, you have various
15:25
components out there, guys. And uh if
15:27
you have some knowledge of ReactJS, you
15:29
can even modify this application
15:31
according to your own needs. But I just
15:33
coded this entire application. You don't
15:35
need to modify anything. You just need
15:36
to learn how I made this. So, it's very
15:42
good application. You will you can do
15:45
this thing. If you are interested the
15:48
link is given you can see all the
15:51
components have this uh we are using
15:56
so and you will see that we are using
16:00
this fabric library fabric JS
16:06
so [snorts]
16:08
these are different effects that we are
16:10
using which is zoom zoom effect which is
16:13
it will scale it this is animate effect
16:16
that we are using this is flashing
16:17
animation, jitter animation, gradient
16:20
animation. So we have defined all these
16:22
animations in the array structure. These
16:25
are different effects that we have
16:27
inside the GIF editor. And these are
16:30
different fonts that we are using using
16:32
which is itallic, bold and uh normal.
16:37
These are pre-made default fonts. We
16:39
have declared this all these arrays with
16:42
the default options.
16:44
This is text related. So various
16:47
sections if you see in the application
16:49
we have four section for the attributes,
16:52
filter, animation, text animation and
16:55
sticker whatever four sections out there
16:58
for these four sections. We have four
17:00
different files here which is first one,
17:04
second one, third one, four. So four
17:07
components are there in this editor tab
17:09
pane. So this editor is made up of four
17:12
components each having its own
17:15
TypeScript file and you can see this is
17:18
actual code. So we have defined all
17:20
qualities right here compression
17:22
standard quality high definition high
17:24
definition original picture and these
17:27
are different reverse normal.
17:30
So if you have some knowledge on reacts
17:32
you will be able to uh see the code
17:36
working.
17:40
this is the actual canvas
17:47
you can see that so here
17:53
we are resolving the GIF here showing
17:56
the live preview
17:58
these are different functions out there
18:00
you can see that we are also using uh
18:03
for managing the state we are also using
18:06
redux because you can see the dispatch
18:08
function. So for managing the data and
18:10
the state inside ReactJS, we are using
18:13
Redux for actually
18:17
uh managing the state of the
18:18
application. So
18:22
this is the actual application guys if
18:24
you are interested the link is given. I
18:26
showed you all the dependencies that we
18:28
are using for this project. You will get
18:30
a zip file. You just need to extract the
18:32
zip file and just run npm run start. You
18:36
just need to say npm run start. It will
18:39
run your development server. It will
18:40
compile the application. It will run
18:42
this application on local host 8,000 and
18:45
you just need to open it inside the
18:47
browser and it will work. If you still
18:49
face any problem, you can contact me at
18:51
my email address and I will therefore
18:54
help you. So please hit that like
18:56
button, subscribe the channel and I will
18:59
be seeing you guys in the next