Up next in 10
Build a React.js Video Splitter Editor in Browser Using FFMPEG WebAssembly & Shadcn ui in TS
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-video-splitter-editor-in-browser-using-ffmpeg-webassembly-shadcn-ui-in-ts/
Show More Show Less View Video Transcript
0:01
Uh, hello guys. Welcome to this uh
0:03
video. So, in this video I'll show you I
0:05
built out a React JS
0:07
uh video splitter
0:09
kind of a application where you can trim
0:12
and split your long videos into short
0:14
videos.
0:15
So, we are running this uh React project
0:18
on localhost.
0:19
And for this we are using FFmpeg
0:22
WebAssembly library. So, if you search
0:25
on Google, this is allows you to use
0:28
FFmpeg directly in the browser.
0:31
>> [snorts]
0:31
>> Uh, the interface, let me show you the
0:33
of the application. So, right here you
0:35
select your video file.
0:44
So, if you have a long video that you
0:46
want to split. So, once you select the
0:49
video
0:52
the video will play in the video player.
0:55
And
0:56
right using the slider, you can actually
0:59
select
1:01
at which time the video should split.
1:03
So, I want let's suppose
1:09
So, at every after every 1 minute, I
1:13
want a new video. So, now what it will
1:15
do, it will split this entire video into
1:18
10 sections.
1:19
This is the first section, second,
1:21
third, fourth, fifth, sixth, seventh.
1:24
So, it will create 10
1:25
videos for you
1:27
by splitting this long video into 10
1:29
short videos. So, now you will get this
1:31
interface. You can download each section
1:33
right here by clicking the download
1:35
button. So,
1:36
all the processing directly happens in
1:38
the browser. It's a single page
1:40
client-side offline
1:42
video splitter kind of application. So,
1:44
as you select the slider in real time
1:48
FFmpeg is doing its processing.
1:50
It's splitting your entire video into
1:53
short videos. So, once you click the
1:55
download button, the processing will
1:56
directly happen.
1:58
And here you can select the location.
2:00
So, the file will get downloaded. So,
2:03
this is
2:04
it splitted the video here.
2:09
So, it only contains a single minute
2:12
here as you can see. So, this is a
2:15
really useful application. It will save
2:17
you a lot of time. The link is given in
2:19
the description. If you're interested in
2:20
purchasing the source code, you can
2:22
directly purchase it. And after
2:25
purchasing it, you will get the source
2:27
code from Google Drive.
2:28
So, as you can see, each and every
2:30
component is coded directly inside
2:33
JSX. So, it's fully customizable.
2:36
So, after purchasing it, you can add
2:38
more features and
2:40
or to this application as well.
2:42
And for running this, we are running
2:44
this locally as by simply npm run dev.
2:48
So, we started the local development
2:49
server.
2:51
So, it's easy way for you to deploy this
2:53
as well by simply running the command
2:55
npm run build.
2:57
And for building this, we are using
2:58
FFmpeg WebAssembly library as you can
3:01
see.
3:02
We are also using Radix UI
3:05
for the user interface.
3:07
We are also using uh
3:09
the latest version of React, which is
3:11
19.
3:14
So, if you're interested in this
3:17
application, definitely you can purchase
3:19
it. It will save you a lot of time as
3:21
well. So, we are also using Tailwind CSS
3:24
as well. So, the interface is quite
3:26
simple.
3:28
You come to the application, the FFmpeg
3:30
will load automatically inside your
3:32
browser. Then you select any long video.
3:36
The video will play in the video player.
3:38
And
3:40
using the slider, you can
3:45
So, split the video after every 1 minute
3:48
or every 2 minute or 3 minute. So, here
3:51
from here you can select
3:54
the actual time period. And
3:57
based upon that, it will actually create
3:59
the short highlights for you.
4:02
So, this can be useful if you want if
4:04
you are having a long video, then you
4:06
want to create highlights and reels.
4:09
So, that in that
4:11
it's
4:12
really useful for you. So, you can see
4:15
that the interface is quite simple. So,
4:17
you select this using the slider and
4:20
then
4:21
click the download button to actually
4:23
download
4:25
the actual output file.
4:31
>> [snorts]
4:31
>> So, we are using FFmpeg. Apart from
4:33
that, we are also using this library
4:35
Shadcn UI for constructing the user
4:38
interface.
4:41
So, this is a UI library for React
4:43
application. So, we are using this
4:45
inside this. Plus, we are also using
4:47
Radix UI as well.
4:51
So, it's an all-in-one complete
4:54
single page
4:56
You can also change the dark theme if
4:57
you want the dark theme from here, you
4:59
can change it
5:01
to light theme, dark theme. So, it's
5:03
fully
5:04
responsive as well. So, it looks quite
5:06
good on the mobile devices, tablet as
5:09
well. So, it's a responsive application.
5:10
If you want to purchase it
5:13
the link is given in the description.
5:15
And if you still face any issues in
5:17
running or deploying the application, I
5:19
will definitely help you.
5:21
You can email me after the payment.
5:24
If you are facing any issues.
5:27
But it's an full-stack React project
5:32
for splitting your long videos into
5:35
short videos.
5:45
So, it's really fast as well.
5:47
It doesn't take too much time. As you
5:49
select
5:51
you can select any size of video.
5:55
So, it doesn't take too much time here.
5:57
As you use the slider, you can see.
6:01
It doesn't take too much time. So, it's
6:03
really fast application.
6:12
So, each and every component as you can
6:14
see, it's
6:17
I coded this from scratch.
6:20
So, I know how it's actually working.
6:23
So,
6:27
and we are using Vite development engine
6:29
for running this React application.