Up next in 10
Build a React.js FFMPEG WASM Project to Build Canva Clone Video to GIF Editor in Browser Using TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-project-to-build-canva-clone-video-to-gif-editor-in-browser-using-ts/
Show More Show Less View Video Transcript
0:02
Uh hello guys, welcome to this live
0:04
stream. So in this live stream, I'll
0:06
show you I built out a Canva clone video
0:09
to give converter
0:12
uh single page application inside
0:14
ReactJS. So we are running this
0:16
application locally right here. So the
0:18
interface is quite simple. You basically
0:20
first of all select a video file
0:24
for which you need to convert that video
0:25
into GIF. So once you select the video
0:27
file the video will play and you can
0:30
simply select which portion of the video
0:32
you want to convert this into GIF. So
0:35
here you can select the starting
0:36
duration and the ending duration.
0:41
So starting I want to trim out this
0:44
portion and here you can select the GIF
0:47
width, height, the speed of the GIF
0:50
animation, the FPS everything you can
0:52
customize it and then you simply click
0:54
convert to GIF. And now the fnpg web
0:57
assembly library will do the processing
0:59
entirely in the browser. So now it is
1:02
actually showing you this progress bar.
1:03
So once it reaches 100% you will see
1:05
this screen. The GIF is automatically
1:08
created right here and you can click the
1:10
download button. So this is the overall
1:12
project in ReactJS. So if you're
1:15
interested in purchasing it, I've given
1:18
the link in the description. You can
1:19
directly purchase it. So this is
1:21
actually the directory structure of the
1:22
project. Each and every file is
1:25
customizable. It's coded inside
1:27
Typescript. So it's also very easy for
1:29
you to deploy this application. It's a
1:31
single page application. All the
1:34
processing is directly happening it
1:37
in the browser. No back end is needed.
1:41
So again you select a video file and you
1:44
basically select which duration you want
1:47
to trim out. So you select using these
1:50
sliders.
1:51
Then again you select the width of the
1:54
GIF animation here you can also select
1:57
the speed as well the FPS everything you
2:00
can do and once again it will show you
2:04
the progress path the SMPPG web assembly
2:07
library is doing its processing so it's
2:09
a simple Canva clone kind of a web
2:12
application
2:17
so if you don't know about ffmpg it's a
2:20
very famous library
2:23
for processing media files. So this
2:26
fmfmppg web assembly library allows you
2:28
to actually use fmpg directly in the
2:31
browser. So we are actually using this
2:35
inside our ReactJS project. If I show
2:38
you the package.json file we are
2:40
actually using if you see
2:43
we using the latest version of React and
2:46
FMPPG web assembly library. So we are
2:49
running it on local host. It's also very
2:52
easy for you to deploy this as well. You
2:54
simply run the command npm run build. So
2:57
this will build out this project and you
2:59
can easily customize it. Each and every
3:02
file is coded inside Typescript. So you
3:05
have full control. So once you purchase
3:06
it, you will automatically get the
3:08
source code from Google Drive.
3:12
So once it reaches 100%, you will see
3:15
that GIF is automatically created. can
3:18
download this.
3:20
So you can do this for any video. It can
3:23
be any second long. You basically select
3:27
it's an advanced editor. You basically
3:29
select which portion. Then you can
3:31
customize everything.
3:41
So if you face any sort of problem after
3:43
purchase, you can contact me at my email
3:46
address in running or deploying the
3:48
application. But you will not face any
3:50
problem after purchase. It's also very
3:52
easy for you to customize it or add
3:54
additional features on top of the
3:56
application. So it's powered by FMPG web
3:59
assembly. It's in Canva clone. So if
4:02
you're interested guys, the link is
4:03
given in the description. You can
4:05
directly purchase it.