Up next in 10
Build a Next.js Shotcut 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-shotcut-clone-video-timeline-editor-using-ffmpeg-wasm-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
show you how I built a shortcut clone.
0:03
Shortcut as you all know it's a very
0:04
popular video editing software for
0:07
Windows, Linux and Mac machine. I built
0:09
my own clone in the browser using
0:12
NextJS. Uh this is a full directory
0:14
structure of the source code. If you
0:16
need the source code, I have given the
0:17
link. You can directly purchase the full
0:19
source code. So each and every component
0:22
is divided into its appropriate
0:23
TypeScript file here as you can see and
0:26
we are using the nextJS as you can see
0:28
the latest version and for this we are
0:31
also using fmpp web assembly library and
0:33
reotion library for building this. So
0:36
now to get started you basically come to
0:39
the command line and just type the
0:42
command npm rundev. So this will start
0:44
the local development server
0:46
at localhost 3000.
0:56
So once it starts you will be able to
0:59
create projects. It has a fully fleshed
1:02
timeline where you can edit your videos
1:04
apply different kinds of effects. Just
1:07
wait. It is starting here as you can
1:09
see.
1:12
>> [snorts]
1:12
>> So it's a single page application. No
1:15
back end is there. It's all the
1:17
processing happens directly in the
1:19
browser using ffmpg web assembly
1:21
library. [snorts] So once the
1:23
application loads as you can see it just
1:26
compiling it. So it's in nextJS.
1:35
So [snorts] after it compiles here you
1:37
will see this is the demo screen here.
1:39
Click on get started. Here you can add
1:41
multiple projects. Give it a project
1:44
name. Click on create. After that uh you
1:48
just click on this and then this
1:50
timeline based video editor will open.
1:52
So here you first of all add your
1:54
necessary input files. It can be images,
1:57
videos and audio files. Then we add the
2:00
video to the
2:01
>> Hello guys, welcome to this video.
2:03
>> You can even adjust properties related
2:05
to video such as size. You can even
2:08
adjust the volume using the slider. Then
2:11
we also have option to add the text.
2:15
Just click add test. And here you can
2:17
change the text.
2:19
You can even change the color of the
2:21
text. And then click add text. After
2:23
adding the text, it will show right here
2:25
in the timeline section. And same we can
2:28
also add the image. So we just click the
2:32
image. We can even adjust the properties
2:34
of the image. just adjusting the width
2:37
and the height.
2:41
So you can just see how easy it is to do
2:44
all these things. And now if you want to
2:46
do the text again you select the text
2:49
here and you can adjust the positioning.
2:52
And now we also have the button of
2:55
splitting. If you want to cut the video
2:57
at any portion you click the split
2:58
button and then you don't need this. So
3:01
you can delete it. So now you can easily
3:04
do this for the text as well. Just click
3:07
the split button in the timeline and
3:09
then delete this
3:11
the unnecessary part and same thing you
3:14
can do that. So it's really simple. It
3:16
will save you a lot of time because all
3:18
>> welcome to this video. So in this video
3:20
I will
3:20
>> after that hello guys welcome to this
3:22
video. So in this you click the export
3:25
button once you are happy you select the
3:28
resolution quality everything and click
3:30
on render. And now this progress bar
3:32
will show and apart after it completes
3:36
you will be able to download the output
3:37
video file. So this is overall nextjs
3:41
project guys. The link is given if you
3:43
want to purchase the full source code of
3:45
this and if you have knowledge you can
3:47
even modify the source code or add
3:49
additional features on top of it as
3:51
well. All the source code files are
3:53
coded inside TypeScript as you can see
3:55
right here. So it's a single
4:30
So if you're interested guys the link I
4:32
have given in the description. So once
4:34
it completes the output video file will
4:36
be created.
4:37
>> Hello guys welcome to this then you can
4:39
click the save button to save the video
4:41
files. So everything is captured such as
4:44
text images.
4:47
Uh hello guys, welcome to this video.
4:52
So this is a thing