Up next in 10
Build a Next.js Sony Vegas Pro Clone Video Timeline Editor Using FFMPEG WASM in Browser Using TS
Dec 4, 2025
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/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:01
Uh hello guys in this video I'll show
0:02
you I built out a nextJS video timeline
0:05
editor using ffmppg web assembly
0:07
library. It's similar to Sony Vegas Pro
0:12
which is a really popular software for
0:15
professional video editing. It's
0:16
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 NexJS and I have given
0:32
the link you can directly purchase the
0:33
full source code. After purchasing it,
0:35
you will get this source code here from
0:37
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 fmpp web
0:46
assembly library remotion. And as you
0:50
can see, we are using next. So it's a
0:52
next.js project and I'm running it on uh
0:56
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 fullyfledged you can if you
1:37
want to control the properties regarding
1:40
the video such as if you want to remove
1:42
the audio you can use this slider to
1:45
adjust the volume.
1:48
As you can see the volume is diminished.
1:53
This is opacity. You can even control
1:55
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. So
2:14
now if you don't want to don't want this
2:16
portion, you click the delete button.
2:18
After that, you can export your video.
2:21
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 ffmpg 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 fresh 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.