Up next in 10
Build a Next.js Kinemaster 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-kinemaster-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: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:14
NexJS which directly runs in the browser
0:17
using ffmpg web assembly library and
0:21
reotion library. So this is the actual
0:23
project. Here we have a fully fleshed
0:25
timeline editor.
0:28
I've 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 runes. 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 play.
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
Hello guys.
2:05
Then we have the option to add the text
2:07
here. So right here you basically
2:10
click the add text button. It will be
2:12
added. And now if you want to adjust the
2:15
height 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 you
3:32
controllable. You can use these sliders
3:34
width, height, XY position, everything
3:36
you can control. Just place it
3:38
accordingly wherever you need to use the
3:41
image. So it's really easy. You get this
3:45
timeline as well, which is really easy.
3:48
You can even uh change the audio as well
3:50
by uploading an audio file as well,
3:53
which is really simple. Then if you are
3:55
happy, then you can export this. Click
3:57
the 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
4:07
just 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 out.
5:22
Hello guys, welcome to this video. So in
5:23
this video I will show you a click the
5:26
save video button. Now your output video
5:29
is saved. So this is the complete video
5:32
editor project.
5:32
Hello guys, welcome to this
5:35
the text images everything added. So
5:40
if you're interested guys I've given the
5:42
link in the description and purchase it.