Up next in 10
Build a Next.js Canva Clone Video Editor With Timeline UI 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-video-trimmer-with-timeline-ui-editor-using-ffmpeg-wasm-in-browser-using-ts-copy/
Show More Show Less View Video Transcript
0:00
Okay, next is Canva clone video editor
0:03
directly in the browser using ffmpg web
0:05
assembly library. We running this
0:07
project locally as you can see. So now I
0:11
will be able to see the demo of this. So
0:13
simply select your video file that wants
0:16
to be trimmed or cut. So once you select
0:19
the video file, it will construct a nice
0:21
little timeline. So using this timeline
0:23
you will be able to cut or trim the
0:27
specific parts of the video. So just
0:29
using the timeline. So as you're moving
0:31
it, you are simply changing the starting
0:33
and the ending duration. So once you are
0:35
happy, you want to trim out this portion
0:37
starting with this to this. Now you have
0:41
this trim button. Once you click this,
0:43
FMPPG will do its processing directly in
0:46
the browser and your this is your output
0:49
file which is created. So in this easy
0:52
way you can cut or trim your videos
0:55
directly in the browser. And now you can
0:57
click the download button to download
0:59
the output file. So this is a entirely
1:01
NexJS project. If you need the source
1:04
code, I have given the link in the
1:05
description. You can directly purchase
1:07
it. So once you purchase it, you will
1:09
get the source code from Google Drive.
1:12
So it's a full directory structure. Each
1:14
component is coded inside TypeScript as
1:17
you can see. And if I show you the
1:19
package JSON file, we using ffmpg web
1:22
assembly library. And we are also using
1:24
the latest version of next react. So
1:27
once you get the source code, you will
1:29
be able to modify this or add additional
1:31
features on top of it as well. So it's
1:33
very easy to deploy the application as
1:35
well. It's a single page application. It
1:39
doesn't have any sort of back end. It
1:41
directly runs in the browser. All the
1:43
processing is happening directly in the
1:45
browser. So as you are moving the
1:47
starting and the ending duration and
1:49
clicking the trim button
1:52
ffmpg is doing its processing. So we are
1:55
using this library ffmppg web assembly
1:58
to create this Canva clone video editor
2:01
which can trim and cut your videos
2:03
directly in the browser. So if you're
2:05
interested guys the link I have given in
2:07
the description you can directly
2:09
purchase it.
2:11
uh if you face any sort of problem I
2:13
will help you
2:15
and
2:17
after you purchase it if you face any
2:18
sort of problem you can contact me I
2:20
will definitely help you so definitely
2:23
purchase it guys the link is given in
2:25
the description Okay.