Up next in 10
Build a React.js Video Timeline Trimmer Editor With Video Player & Live Preview in Browser Using TS
Jun 19, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-video-timeline-trimmer-editor-with-video-player-live-preview-in-browser-using-ts/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:07
uh hello guys welcome to this uh live
0:09
stream So in this live stream I'll show
0:11
you a
0:13
uh video timeline uh trimmer and cutter
0:16
kind of application that I developed
0:17
inside ReactJS which allows you to trim
0:20
out specific portions inside your video
0:23
or cut out specific portions So the this
0:26
is the demo of the application You will
0:28
see I'm running it on localhost 5173
0:31
And if you land on this interface you
0:33
will see this uh user interface Here you
0:36
will have this button to select a video
0:38
file that you want to trim or cut And as
0:41
soon as you select this video here you
0:43
will see the video will be loaded inside
0:45
this nice little video player And the
0:49
thing about this application is that it
0:51
will construct this timeline that you
0:53
see right here at the bottom side It
0:55
will exactly tell you the total length
0:56
of the video which is 341.7 seconds And
1:00
uh then using this timeline you can
1:02
actually trim out the portion of the
1:04
video that you want to cut or trim And
1:06
then we also have a series of buttons
1:08
right here We can play the video or
1:10
pause the video And then using this
1:14
timeline you can cut specific portions
1:16
of your video
1:19
And then we have the button to preview
1:21
the trimming
1:24
So this will show you the portion that
1:26
you want to cut And then we also have
1:28
the third button to export this into a
1:30
new file video file
1:33
So this will actually trim out the new
1:36
file
1:38
and once it the processing is completed
1:40
it will download this into a new file
1:44
and download this as an attachment So
1:46
very simple logic
1:49
So if you want the full source code of
1:52
this application guys the link is given
1:54
in the description of the video You can
1:56
go to my website procodestore.com and
1:58
directly purchase the full source code
2:00
of this application The source code will
2:03
look something like this You will get
2:04
this directory structure The whole
2:06
application is divided into multiple
2:08
components Each component is coded
2:11
inside TypeScript You will see timeline
2:13
trim bar video player And once you get
2:16
the source code you can easily modify
2:18
the source code or add additional
2:20
features on top of that as well And if I
2:22
show you the package.json file we are
2:24
using the latest version of React which
2:26
is React 19
2:29
And uh now to run this it's very easy
2:32
Some first of all you say npmi Uh this
2:35
will install all the NodeJS modules and
2:37
it will create this folder node modules
2:40
And then to start this application you
2:42
simply type the command npm rundev So
2:45
this will start the development server
2:47
on localhost 5173
2:50
and if you go to the browser simply type
2:52
this URL and your application will load
2:56
and then you repeat the step Just select
2:58
your video that you want to trim out and
3:01
then it will construct out this nice
3:02
little timeline and then you can select
3:05
whatever portion that you want to delete
3:09
Just preview and export The thing about
3:13
this application is that you don't
3:14
require any third party software for
3:16
trimming your videos You can perform
3:18
this basic operation It's very fast
3:21
application is really fast and it will
3:24
save you a lot of time So definitely
3:27
worth purchasing this application and
3:29
looking at how I built this application
3:31
So it will be very beneficial for you So
3:34
the link is given in the description You
3:37
can directly purchase it from my website
3:40
procordstore.com
3:42
And uh
3:44
you can see that this the interface also
3:46
is very user friendly It's very simple
3:50
So you can see this is video trimmer and
3:54
cutter kind of application
3:57
Once completed it will download the file
3:59
as an attachment And thank you very much
4:02
for watching this video and also check
4:04
out uh my website which is
4:06
freemediattools.com
4:08
uh which contains thousands of tools