Up next in 10
Build a React.js Video Cropper & Trimmer Editor in Browser Using FFMPEG WASM in TypeScript
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-video-cropper-trimmer-editor-in-browser-using-ffmpeg-wasm-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I'll show you I built out
0:04
a ReactJS video cropper and trimmer kind
0:08
of video editor directly in browser
0:10
using ReactJS. So we are running this
0:12
application local host as you can see.
0:15
So this is the full directory structure
0:17
of the project. Each and every component
0:20
is coded entirely from scratch in
0:22
Typescript. So everything is
0:25
customizable. If you need the source
0:26
code, the link is given. you can
0:28
directly purchase the source code and uh
0:31
if I show you the package.json JSON
0:32
file. We using the latest version of
0:34
React here 18. Here we are also using
0:37
ffmppg web assembly library. And uh let
0:41
me show you the demo of the application
0:43
first of all. So once you start the
0:46
application, it's really easy. You can
0:48
select a video file and as soon as you
0:51
select the video file, all the
0:53
processing will directly happen directly
0:55
in the browser. So no back end is there.
0:57
No server side code is there. So it's a
1:00
single page application. So you can play
1:02
the video. So the video will play right
1:05
here. You will see the all the relevant
1:07
information will show of the video in a
1:09
video player. The size, the duration,
1:12
everything. And now in the right hand
1:14
side corner of the screen, you have the
1:16
control for using your mouse. You can
1:19
select the portion of the video,
1:21
whatever portion that you want to crop.
1:24
And after you crop it from here, you can
1:27
select what part of the video you want
1:30
to trim using the slider.
1:33
So it's really becomes really easy for
1:35
you to trim out the specific portion of
1:37
the video and also crop it as well. So
1:40
using your mouse. So just select the
1:42
portion that you want to crop. After
1:44
that, click this button.
1:46
And as soon as you click the button, the
1:49
you can click the export button.
1:53
So click the export button and now the
1:56
processing will start here using
1:58
progress bar. You will see the prog.
2:14
You can select the format here. MP4
2:16
gives everything.
2:29
So you will see the pro uh progress bar
2:31
will show right here. So once it reaches
2:34
100%
2:40
the video will automatically download
2:42
and this is a fully fledged.
2:56
So it's entirely made inside FMPG web
2:59
assembly library. If you're interested
3:00
in purchasing it, the link is given and
3:03
you can easily run it and deploy the
3:06
application. I'm running it on local
3:07
host as you can see npm rundev. So it
3:11
started this at localhost 3000
3:14
and you can easily build out the
3:16
application and now you can see export
3:18
is completed and you can play the output
3:21
file here inside your video player. So
3:24
the video you can see the video is
3:26
successfully cropped and also trimmed.
3:29
So it takes a just a matter of seconds.
3:32
You don't need any extra software. You
3:34
can directly execute everything in the
3:36
browser. So as I told you we are using
3:39
this ffmpg
3:42
web assembly library which is an
3:44
open-source package for processing media
3:47
files directly in browser using ffmppg.
3:51
So it's we are using this web assembly
3:53
library directly in ReactJS to build out
3:55
this complete video cropper. You can
3:58
even pre preview the crop as well by
4:01
clicking this button. So the final
4:03
result will look something like this I
4:05
showed you. You can even export this to
4:08
a GIF file as well. Simply select and
4:11
then select the quality GIF setting FPS.
4:14
Everything is customizable. You can even
4:17
add more features on top of the
4:18
application. Once you purchase the
4:20
source code, you will get entirely
4:22
everything. Each and every source code
4:25
is customizable.
4:27
And [clears throat] you can just see
4:28
here. So once you crop,
4:32
you can even add let's suppose I want to
4:36
do another cropping here of this
4:38
portion.
4:42
So we also have readym made cropping 4x3
4:46
9x6. This is a free crop here. And from
4:50
here you can select
4:53
the duration here and click add to. So
4:57
now this is uh a newly created crop.
5:01
Here you can preview the section here.
5:03
You'll see it will look something like
5:05
this. And you click the export button.
5:08
And again the processing will start and
5:11
also the progress bar will also show
5:14
and after that the video will
5:16
automatically gets downloaded.
5:20
So
5:24
so the thing is it's really fast as well
5:28
and it directly executes all the
5:31
processing directly happens in the
5:32
browser. It's a single page application
5:34
SFMPG web assembly library. We are using
5:37
the latest version of React and if you
5:40
still face any problem I will definitely
5:42
help you in running on deploying the
5:44
application. If you face any issues you
5:46
can contact me and we are also using
5:48
Tailwind CSS for the interface. We are
5:51
using Vit as the development engine and
5:56
all the files are coded in Typescript.
5:58
each and every section. This is the
6:00
editor, export, layout, the video
6:03
player, user interface, the upload
6:05
section.
6:07
So you can just see here I coded this
6:10
project from scratch. So you can see
6:13
these are the util files.
6:16
So it's a readymade project. You'll see
6:20
now again it's downloaded.
6:25
Can see that. So the video is cropped
6:28
and once you want to re re-upload option
6:31
is also there to again start a new
6:34
video.
6:35
So here you can select any video you can
6:38
do this unlimited number of time. So I
6:41
coded this using FMPG library using your
6:44
mouse. It's just select the portion of
6:47
the video that you want to crop and
6:49
trim. uh using these sliders now you can
6:52
trim out the specific portion
6:59
and from here you can select the quality
7:02
and this time you can export this to GIF
7:04
file as well. From here you can change
7:06
the quality everything you can control
7:09
the FPS.
7:13
So from here you can
7:17
can also preview the section as well. So
7:20
you can see
7:24
just click export.
7:30
So it's really easy for you.
7:31
[clears throat] You can purchase a
7:33
domain name and easily deploy this uh
7:35
video cropper and trimmer editor.
7:44
So the user will also see a progress
7:46
bar. So it will exactly tell how much
7:48
time is remaining. So it's a good user
7:51
interface specifically for the user to
7:54
use the application
7:58
and no back end is involved. So it's
8:00
entirely running at a single page
8:02
application. So it's easy for you to
8:03
deploy this. So you can actually
8:08
can see the link is given you can
8:10
directly purchase it. I've shown you the
8:12
complete demo.
8:25
So you can see you will get this
8:26
notification export completed and uh
8:29
then you can output download the output
8:32
file. So the videos you can see ex
8:34
successfully exported and it's
8:37
successfully cropped and trimmed. So
8:40
this is an all-in-one uh fullstack
8:42
ReactJS video cropper application. You
8:46
can easily deploy this. We are using
8:47
ffmpg web assembly library. If you're
8:50
interested the link is given in the
8:52
description.