Up next in 10
Build a Next.js Kapwing Clone Video Timeline Editor & Recorder Using FFMPEG WASM in Browser Using TS
Dec 3, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-kapwing-clone-video-timeline-editor-recorder-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
Guys, welcome to this uh live stream.
0:01
So, in this live stream, I'll show you a
0:03
NexJS video timeline editor that I
0:06
developed similar to Capfink, which is
0:09
really popular video editor. So, let me
0:12
show you the demo here. It's a
0:13
fullyfledged timeline based editor in
0:16
NextJS
0:17
and I've given the link in the
0:19
description. You can directly purchase
0:21
the full source codes. Once you purchase
0:22
it, you will get this full directory
0:24
structure. Every file is coded inside
0:27
Typescript. And if I show you the
0:29
package.json file, it's built in FMPG
0:32
web assembly library and reotion.
0:35
And we are using the next as you can see
0:38
the latest version. And now to run this
0:40
project, it's very simple. You come to
0:42
the command line and say npm rundev. So
0:45
this will start the local development
0:47
server. So once you land on this, this
0:49
will be the interface of the
0:51
application. Click on get started. Here
0:54
you can add multiple projects. After
0:56
that simply click on that and then you
0:59
will be granted with this fully fleshed
1:01
timeline screen. So here you can first
1:03
of all add your input video file. You
1:06
can even add images, audio files as well
1:11
and just click the plus icon to add the
1:13
video file. Welcome to this video
1:15
similar to capwing how you operate
1:18
there.
1:18
I will show you a camera.
1:20
It's a mini clone that I developed.
1:22
Remove background.
1:23
Now we have a set of options. If you
1:25
want to cut or split the video, you
1:27
click the any location you want to split
1:30
the video, you click split. And now it
1:33
will divide the into two parts. So now
1:36
if you don't want this part, you can
1:37
click the delete button. And you can
1:39
even adjust properties related to the
1:41
video as well, such as the volume of the
1:44
audio.
1:45
Hello guys, welcome to this like this
1:47
using this slider.
1:52
Then we also have the option to adjust
1:55
the width of the video as well
1:58
like this.
2:02
Then we also have option to add text in
2:05
the sidebar. If you say add text, you
2:07
can add the text here and you can change
2:10
the color of the text here as you can
2:12
see. Same goes with images. You
2:15
basically add this again this image to
2:17
the canvas as well. And then you can
2:21
even change the opacity of the image,
2:24
the position, width, height. Everything
2:26
is customizable. As you can see, we are
2:28
doing it very easily.
2:33
You can even change the X position, Y
2:35
position. Same goes with text. Simply
2:37
select the text in the timeline and then
2:40
adjust the position.
2:48
Now again if you want don't want this
2:50
you can.
3:00
So you can just see how easy it is to
3:02
remove elements from the timeline
3:06
by using the split operator. And then
3:08
now if you just want to
3:09
Hello guys, welcome to this video export
3:12
this. You click the export button here.
3:13
You can even change the quality as well.
3:16
Click on render. Then it will show you
3:18
the progress bar and uh once it
3:20
completes you will see your output video
3:22
file created
3:24
and uh this is a fullyfledged timeline
3:27
based editor in nextJS. I've given the
3:30
link in the description. If you are
3:31
interested you can purchase the full
3:34
source code. Uh after you purchase it
3:36
you will get the code from Google drive
3:38
automatically.
3:40
So you can just see every component is
3:42
divided into its appropriate
3:45
TypeScript files. So if you have
3:47
knowledge you can even modify the source
3:49
code or add additional features as well.
3:59
So the thing is that it doesn't have a
4:00
back end. It entirely works in the
4:02
browser. Everything is happening
4:04
directly in the browser using ffmpg web
4:06
assembly library and reotion.
4:17
So once it completes the rendering
4:19
process the output video will be shown
4:21
to you.
4:26
Hello
4:28
it has been created. You can click the
4:30
download button to save your video file.
4:34
So everything is added
4:36
the text image everything is added you
4:38
can see welcome to this video.
4:40
So in this way you can edit your videos
4:41
using this timeline based editor in
4:43
nextJS.
4:45
So the link is given you can directly
4:46
purchase it.