Up next in 10
Build a Next.js Sony Vegas Pro Clone Video Timeline Editor Using FFMPEG WASM in Browser Using TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-sony-vegas-pro-clone-video-timeline-editor-using-ffmpeg-wasm-in-browser-using-ts/
Show More Show Less View Video Transcript
0:01
Uh hello guys, in this video I'll show
0:02
you I built out an XJS video timeline
0:05
editor using FMPPG web assembly library.
0:08
It's similar to Sony Vegas Pro
0:12
which is a really popular software for
0:15
professional video editing. It's
0:17
available for only Windows. I basically
0:20
built out a clone of it directly in the
0:22
browser. If I show you the application,
0:25
this is the fully fledged video editor.
0:28
It's developed in nextJS and I have
0:31
given the link you can directly purchase
0:33
the full source code. After purchasing
0:35
it, you will get this source code here
0:37
from Google drive automatically. All the
0:39
components are divided into its
0:41
appropriate TypeScript file here. And if
0:44
I show you, we are using ffmpg web
0:46
assembly library reotion. And as you can
0:50
see, we are using next. So it's a
0:52
next.js project. And I'm running it on
0:56
uh locally here. As you can see npm
0:58
branddev. After that the application
1:01
will start. This is a welcome screen.
1:04
You click on get started. And here you
1:06
can add multiple projects. Just give it
1:08
a name.
1:10
After that
1:12
you go to this and this will be a
1:15
fullyfledged timeline video editor. So
1:18
here you have the option to add your
1:21
media files. It can be images. It can be
1:24
video as well. I'll add this. You click
1:27
the plus icon to add the video to the
1:29
canvas and after adding it you
1:31
>> Hello guys welcome to this video. So in
1:33
this video I will show you.
1:34
>> So this is a fully fleshed you can if
1:37
you want to control the properties
1:40
regarding the video such as if you want
1:42
to remove the audio you can use this
1:44
slider to adjust the volume.
1:48
As you can see the volume is diminished.
1:53
This is the opacity. You can even
1:55
control the opacity of the video.
1:59
And if you want to split the video or
2:03
cut the video using the timeline, it's
2:05
very simple. You click on the portion.
2:08
After that, click on the split button.
2:10
And now your video will be splitted.
2:13
So now if you don't want to don't want
2:16
this portion, you click the delete
2:18
button. After that, you can export your
2:20
video. You have the export button
2:24
and uh click on render. You can adjust
2:26
the quality of the video as well using
2:28
this slider
2:30
and click on render. After that your
2:33
video output video will be downloaded
2:35
automatically. So the processing is
2:38
taking place using fmpg web assembly
2:40
library.
2:42
So the link is given guys. You can
2:44
directly purchase the source code. After
2:46
purchasing it you will get this full
2:48
directory structure. And if you do have
2:50
the knowledge, you can even modify the
2:52
source code or add additional features
2:54
on top of this as well.
2:58
Apart from that, you can also have the
3:00
option to add text, images.
3:04
I will show you now. You can see the
3:06
output video is created. Hello guys.
3:09
Click the save video button. This will
3:11
download this. Apart from that, if you
3:14
also want to add some kind of watermark
3:16
text, you click the text button and then
3:19
you can add your text,
3:22
you can basically adjust the color of
3:24
the text as well by just selecting the
3:27
text here and right here in the right
3:29
hand side.
3:34
Hello guys, if you want to add multiple
3:36
text, it's very simple. Again, click add
3:39
text. So
3:50
you can add multiple text as well. So
3:53
it's really simple using this timeline
3:55
here. So once it get passed,
4:02
so if you just want to remove it, you
4:04
can also remove it. Same goes with the
4:06
images as well. You add this image to
4:08
the canvas.
4:17
So it's really simple here. So you can
4:21
basically you can see the image is added
4:23
to the canvas here. Here you can adjust
4:26
the opacity of the image.
4:29
You can control the width, height,
4:31
everything.
4:40
Hello guys, welcome.
4:44
So it's a fully flesh editor guys. Uh
4:46
you can do all sort of things using
4:49
this.
4:53
You can even select a bunch of images
4:55
and convert those images into video as
4:57
well. So all sort of things are possible
4:59
using this timeline video editor project
5:02
and it's a single page application. All
5:04
the processing is happening directly in
5:06
the browser. So the link is given guys
5:10
in the description you can purchase the
5:12
full source code.