Up next in 10
Build a Next.js Kinemaster 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-kinemaster-clone-video-timeline-editor-using-ffmpeg-wasm-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
So welcome to this uh live stream. So in
0:02
this live stream I'll show you I built
0:03
out my own kind master video editing
0:06
tool directly in the browser. Kind
0:08
master as you know it's a very popular
0:11
video editing tool. So I built it inside
0:15
next.js which directly runs in the
0:17
browser using ffmpg web assembly library
0:20
and remotion library. So this is the
0:23
actual project. Here we have a fully
0:25
fleshed timeline editor.
0:28
I have given all the source code in the
0:30
description of the video. You can
0:31
basically purchase the full source code.
0:34
After purchasing it, you will get the
0:35
source code from Google Drive. Each and
0:37
every component is coded inside
0:39
Typescript as you can see. And uh if I
0:42
show you the package JSON file, it's a
0:44
Nex.js project here as you can see.
0:48
And we are also using remotion library
0:51
and fMPPG web assembly library for
0:54
building out this application. So I
0:56
basically started this application just
0:58
after you purchase it. Simply go to the
1:00
directory npm rundev. So this will start
1:04
the local development server at
1:06
localhost 3000. So this is the actual
1:09
interface of the application. You click
1:10
on get started and then basically you
1:14
can add multiple project. Click on add
1:16
project and just name it. Click on
1:19
create. As soon as the project is
1:21
created you will be redirected to the
1:23
timeline screen. So here you can add
1:25
your media. It can be images, it can be
1:28
videos as well, audio files as well. So
1:31
simply add them and just click the plus
1:34
icon to add this media to the canvas. So
1:38
now we can clear.
1:39
>> Hello guys, welcome to this video. So in
1:41
this
1:41
>> after that we have options here to add
1:44
uh you can basically click on any
1:46
individual and click on this split
1:48
button to cut the video really easily.
1:51
So as soon as you do this, it will be
1:53
divided into two portions. And now if
1:56
you don't want this portion, you can
1:57
click on the delete button. So it's
1:59
really easy to delete and cut videos in
2:02
the in this timeline video editor.
2:04
>> Uh hello guys.
2:05
>> Then we have the option to add the text
2:07
here. So right here you basically click
2:11
the add text button. It will be added.
2:13
And now if you want to adjust the height
2:16
and the width, you can adjust the
2:17
opacity as well of the video. Or if you
2:21
want to select the text here, change the
2:23
color, you can even do that as well. Uh
2:27
adjust the opacity as well.
2:31
The phone side, everything. So if you
2:34
want to adjust the position, you can use
2:36
these sliders really easily.
2:45
So,
2:53
so now we also have the export button.
2:56
Uh, hello guys. Same thing you can do
2:58
this with images as well. So, go to
3:01
library. I basically added this image.
3:08
So if you want to add this, adjust
3:14
the width and the height, you can use
3:15
these sliders.
3:31
So each and everything is controllable.
3:33
You can use these sliders, width,
3:35
height, X, Y, position, everything you
3:37
can control. just place it accordingly
3:39
wherever you need to use the image. So
3:43
it's really easy. You get this timeline
3:46
as well which is really easy. You can
3:48
even even uh change the audio as well by
3:51
uploading an audio file as well which is
3:53
really simple. Then if you are happy
3:55
then you can export this. Click the
3:57
export button and everything will be
4:00
exported. You can even change the
4:01
quality as well. 480p 720p
4:04
processing speed everything. So now just
4:07
click the render button and this
4:09
processing window will open. As soon as
4:11
the processing is done, you will be your
4:14
video will be downloaded. And this is
4:16
the overall project guys. It's similar
4:18
to kind master. If you want just want to
4:20
perform some basic video editing
4:22
operations such as cutting your video,
4:24
using a timeline, adding text, images,
4:26
this will be a perfect project for you.
4:29
And if you have some coding experience,
4:31
you if you get this source code after
4:33
purchasing it, you can even modify the
4:35
source code or add additional features
4:37
on top of of this as well. So it's coded
4:40
inside the TypeScript as you can see
4:43
each and every component. So in my
4:46
opinion, you definitely purchase it. The
4:49
link is given in the description. It's a
4:52
really awesome video editor which will
4:54
save you a lot of time as well because
4:56
editing videos is a really difficult
4:59
job. So this is a single page
5:01
application. All the processing is
5:03
happening directly in the browser. So no
5:05
back end is involved here. Everything is
5:08
happening directly in the browser once
5:10
you start the application.
5:18
And now you can see the processing is
5:20
complete. This is your output.
5:22
>> Hello guys, welcome to this video. So in
5:23
this video I will show you a
5:25
>> click the save video button. Now your
5:28
output video is saved. So this is the
5:31
complete video editor project.
5:33
>> Welcome to this.
5:35
>> The text, images, everything added. So
5:40
if you're interested guys, I've given
5:42
the link in the description can purchase
5:44
it.