Up next in 10
Build a React.js Canva Clone Video Cropper Editor in Browser Using FFMPEG WASM in TypeScript
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-video-editor-to-croptrim-with-live-preview-using-ffmpeg-wasm-in-browser-using-ts-copy/
Show More Show Less View Video Transcript
0:00
Hello guys, welcome to this video. So in
0:02
this video, I'll show you I built out a
0:04
Canva clone uh video cropper editor
0:07
where you'll be able to crop your videos
0:09
directly in the browser. So we are
0:11
running this project at localhost as you
0:14
can see. So this is entirely built
0:16
inside ReactJS. So this is the full
0:18
directory structure of this project. If
0:20
you're interested, you can directly
0:22
purchase the full source code of this
0:25
project. I have given the link in the
0:26
description. So as you can see we are
0:29
using the latest version of react and
0:31
for this we are also using ffmppg web
0:33
assembly library as well. So I already
0:35
started this project. We are running it
0:38
locally. It's also very easy to deploy
0:40
as well.
0:42
So now just select your video file
0:46
whichever video file that you want to
0:48
crop. After that this interface will
0:50
open. So as we crop images, same thing
0:54
we need to do for images videos as well
0:58
using your mouse. Simply select the
1:01
portion which portion you want to crop
1:04
of this video. So let me select this
1:07
portion only.
1:09
After that you click the
1:13
confirm button. After that click the
1:15
render button to start FMPG processing.
1:20
So as soon as the processing finishes
1:23
your video will be successfully cropped
1:25
and the output video file will be shown
1:27
to you. So mind you all this processing
1:31
is directly happening in the browser.
1:32
There is no back end to this
1:34
application. It's a single page
1:36
application inside ReactJS.
1:40
So all the processing is taken place
1:42
directly in the browser.
1:46
So you also see the progress bar how
1:48
much time is remaining. So everything is
1:50
it's a fully fleshed project and once
1:53
you purchase it you will be able to see
1:55
the source code and also be able to
1:57
modify the source code as well or add
2:00
additional features.
2:05
So this processing totally depends upon
2:07
the length of the video file. So if your
2:10
video is long then the processing will
2:12
take large longer time.
2:15
So we are using this library ffmpg web
2:18
assembly library which allow you to
2:20
execute ffmpg directly in the browser.
2:24
So we are using this inside our
2:29
project.
2:36
So these are the logs here. As you can
2:38
see fmpp is directly processing the
2:41
video second by second.
2:44
So once it finishes you will see the
2:47
output video file and this is the full
2:50
directory structure of the project. I've
2:52
given the link guys in the description.
2:54
Each component is divided into its
2:57
appropriate TypeScript file and SAS
3:00
file. So everything is customizable.
3:02
Once you get the source code you will be
3:04
able to see the source code and see how
3:06
I built out this project.
3:12
So now you can see the video is
3:14
successfully cropped. Uh hello guys and
3:17
then I selected that portion and
3:19
successfully the video is successfully
3:21
cropped here as you can see that. So
3:23
this is really simple guys. Uh
3:28
if you just want to crop the video, this
3:30
is a very important project that I
3:33
developed. Cropping videos are really
3:36
difficult because uh you requires some
3:39
special software for doing its job. So
3:44
this by which you basically use your
3:48
mouse and simply select whichever
3:52
portion that you want to crop like
3:57
you basically can select using your
3:59
mouse. After you selected it just
4:04
and click on render. That's all. After
4:07
that the video successfully cropped here
4:10
and you basically get the option to
4:12
download
4:13
and you can download the output cropped
4:15
video. So it's a Canva clone video
4:19
cropper editor to the check out page
4:21
which similar to Canva clone video
4:23
cropper editor. So if you're interested
4:25
guys in this uh I have given the link in
4:27
the description of the video. You could
4:29
directly purchase this full source code.