Up next in 10
Build a Next.js Remotion Project to Build Canva Clone Video Editor in Browser Using FFMPEG in TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-remotion-project-to-build-canva-clone-video-editor-in-browser-using-ffmpeg-in-ts/
Show More Show Less View Video Transcript
0:00
I built out a NexJS video timeline
0:03
editor uh which directly executes it in
0:06
the browser. For this we have used a
0:08
very famous react library for building
0:13
for editing videos and making pro videos
0:15
programmatically which is called as
0:17
remotion.dev.
0:19
So we have used this very popular
0:21
library
0:23
inside our nextjs project. So this is a
0:26
fullyfledged timeline editor. So just
0:28
wait let me open the zoom it tool so
0:30
that I can zoom in on the
0:34
so this is the editor right here. Here
0:36
you will actually add the media file. So
0:39
we are running it on localhost 3000. So
0:41
we are using this reotion.dev library
0:46
for editing the videos and also using
0:48
fmpp web assembly library. So I have
0:51
given the link in the description. You
0:52
can directly purchase the full source
0:54
code.
0:56
So we are running this at uh local host
0:59
here npm rundev. So it is compiled
1:02
successfully. Let me show you the demo
1:03
here. So first of all you actually add
1:07
the actual video files or images.
1:13
You basically add the video to the
1:15
canvas here. So once you add the video
1:17
to the canvas the check out page where
1:19
you can purchase. Then you also have the
1:22
option to add tech
1:24
text as well. You can change visual
1:27
properties regarding text such as the
1:29
color of the text. You can even align
1:32
this perfectly using manipulating the X
1:35
position and the Y position.
1:38
You can even change the phone size like
1:40
this.
1:42
It's very simple. At any point of time
1:44
you want to split the video, you can
1:46
click the split button. uh in this easy
1:48
way you can delete the unnecessary
1:50
portion here. So same goes with the text
1:53
as well.
1:55
So very simple you can see that. So how
1:57
easy it is and then we also get the
1:59
export button. Same thing you can do
2:02
this with images as well. You can add
2:03
this to the audio files as well. And
2:07
then here you can manipulate the quality
2:09
of the video by selecting the resolution
2:12
processing speed and then click render.
2:14
As soon as it does, it basically shows
2:16
you the progress bar. So once it
2:18
completes, you will be able to download
2:20
the output video file. So with the help
2:23
of this, you can create edit your videos
2:26
directly in the browser. It's a single
2:28
page application
2:30
developed in nextJS.
2:36
So all the source code will be given in
2:38
the description. So this is the full
2:40
directory structure. Uh
2:43
you will be All the files are coded
2:45
inside Typescript. So as you can see
2:48
that so
2:52
we are using FMPG library. We are also
2:54
using next. So the link is given. You
2:57
can purchase the so now you can see the
2:59
video is created. You can click the save
3:01
video button to download the video. So
3:04
this is a really awesome uh will be
3:07
redirected to the check out page. Canva
3:09
clone video editor that I built using
3:12
this remotion library which
3:16
and if you are interested you can
3:18
purchase it. The link is given in the
3:20
description.