Up next in 10
Build a Next.js Canva Clone Browser Video Editor With FFMPEG WASM + WebRTC Screen Recorder in 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:01
Uh hello guys in this video I'll show
0:03
you uh I basically build a nextjs
0:06
project where you can actually edit your
0:08
videos directly in the browser. This is
0:10
the actual interface of the application.
0:12
I have given the link you can directly
0:14
purchase the full source code and after
0:17
purchasing it you will get this full
0:18
directory structure. Uh all the files
0:21
are coded inside typescript here as you
0:24
can see every component.
0:27
And if I show you the package JSON file,
0:29
we using Nex.js, we are also using ffmpg
0:32
web assembly library for building out
0:34
this full project. If I show you the
0:37
demo here, so this entirely runs in the
0:39
browser. It's a single page application.
0:41
No back end is there. Now here you
0:44
simply select your video file. Whichever
0:46
video file you are editing, simply
0:48
select that. After that, the video will
0:51
load and you will be able to cut and
0:54
compress your video. So this is the
0:56
>> Hello guys, welcome using this nice
0:59
little timeline structure here. You can
1:01
actually control which part of the video
1:03
you want to cut. So you can see as we
1:06
are moving it in the timeline, it also
1:08
shows you the starting duration, ending
1:10
duration and the total duration of the
1:12
video. Now let's suppose I want to
1:14
delete this portion. I can simply
1:19
cut and you can even convert this into a
1:22
GIF file. Here you can control the
1:24
quality as well
1:27
and you can even remove the audio as
1:29
well by selecting no audio and click on
1:31
start and this will show you a nice
1:33
little progress bar and after it
1:35
completes it reaches up to 100% your
1:37
video will be created and you will be
1:40
able to download the video. So FMPG is
1:44
doing its magic right here. It's doing
1:47
the processing in the browser itself.
1:50
So
1:52
once it reaches 100%. So the link is
1:55
given you can directly purchase the full
1:57
source code after purchasing it you will
2:00
be able to modify the source code or add
2:02
additional features once you get the
2:04
source code. So we are simply running it
2:06
locally by executing npm rundev. So this
2:09
has started a local development server.
2:12
It's also very easy to deploy the
2:13
application as well. And for building
2:16
this we are actually using this ffmpg
2:20
web assembly library which is a very
2:22
popular library to actually allow ffmpg
2:26
to be directly executed in the browser.
2:29
So we are using this inside our nextjs
2:32
project.
2:33
So with this nice little progress bar as
2:36
well. So if you are interested in
2:38
purchasing it the link I have given in
2:40
the description. I will show the image.
2:42
So once it completes it will show you
2:43
the output video which has been.
2:47
Now you can click the save video button
2:49
to save the video. Apart from that you
2:51
can even do screen recording as well.
2:54
There is also a second option to record
2:57
your screen. Here you can select
3:01
it will also do your screen recording
3:04
with audio as well. So
3:07
after you finish it will again
3:10
encode your video directly in the
3:12
browser as you can see that
3:14
so everything the timeline is there.
3:19
So again you click start and it will
3:22
download your videos. So this is a fully
3:24
fledged video timeline editor using fpg
3:27
web assembly library in nextJS.
3:30
So the link is given you can directly
3:32
purchase the source code.