Up next in 10
Build a React.js Electron.js Video Editor Using Fluent-FFMPEG Library in TailwindCSS Desktop App
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-electron-js-video-editor-using-fluent-ffmpeg-library-in-tailwindcss-desktop-app/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I show you I built out a
0:05
complete electronjs
0:07
uh ffmppg
0:10
project. So it's a video editor. So it's
0:14
built inside ReactJS and it's also using
0:18
electronjs which is actually a framework
0:20
for building desktop applications.
0:23
So it actually can build out. So this is
0:26
actually you can see we are using react
0:30
and we are also using fluent FMPG
0:33
and then we are also using this
0:37
electron.
0:39
So you can just see here we are use
0:41
electron for this to build out a
0:44
complete desktop application. So right
0:46
here we are running this command npm
0:48
rundev. So this has started this project
0:52
and uh if you need the source code of
0:54
this the link is given you can directly
0:56
purchase the source code. So this is the
0:58
full directory structure. So each and
1:00
every component is customizable. I built
1:03
it from scratch. So all the components
1:06
this is you can see the ffmpg fluent
1:08
fmpg library we are using. Now this is
1:11
the interface which looks something like
1:13
this. So right here you have the option
1:14
to select a video file that you want to
1:17
edit. So simply click the import button
1:20
and simply import any video and just add
1:24
this to the timeline section. So here
1:26
you can play the video.
1:29
So here you can zoom. So this basically
1:32
generates this fully timeline that you
1:34
see right here. And we have this option
1:36
to trim. This is the trim option. You
1:40
can play the video in the video player.
1:43
And at any location let's suppose at
1:45
this location we want to trim. So you
1:48
simply click this
1:50
icon. So this will split the video into
1:53
two se two section. So now you can
1:56
select which section you don't want.
2:01
Similarly again if you want to split at
2:03
this location click this. So now it
2:06
divided this video into three sections.
2:08
So depending upon which section you
2:10
don't need you click the dustpin icon.
2:15
So now that section is removed. So you
2:18
can just see here it's easy for you to
2:20
trim out the long videos. And then you
2:22
have this
2:25
export clip button. As soon as you click
2:27
it,
2:29
give it a file name.
2:36
I think you do need to give it a file
2:38
name as well. So
2:56
yeah, so it's automatically saved here.
2:58
It's just a error message which is
2:59
coming. The video file is saved. This is
3:02
a fullyfledged Electron project, guys.
3:04
If you see
3:06
electron, if you don't know about
3:07
electron, it's a framework electronjs
3:12
which actually can build out
3:14
crossplatform desktop applications with
3:17
JavaScript, HTML, CSS. So specifically
3:20
for this we have used ReactJS for this
3:23
and if you see we are also using this
3:27
library fluent FMPG. We have also used
3:30
Tailwind as well. Fluent FMPPG which
3:34
actually allows you to use ffmpg
3:37
directly in the browser. It's actually
3:40
available as a npm package.
3:44
So it's a very popular package almost 2
3:46
million downloads. So
3:51
you can even build out as a executable
3:54
as well. If you check the disc folder,
4:00
I think it's present inside
4:03
the release section. Sorry.
4:05
So once you run the npm rundev command,
4:08
it will compile it to a .exe file which
4:10
is actually a desktop application. So
4:13
you can run this application directly.
4:15
If I close this,
4:19
so once you build it out, you can easily
4:22
run this. So it will install it inside
4:24
your Windows system as a desktop
4:26
application.
4:29
So this is the best thing about this
4:32
Electron application because you can
4:34
easily install this inside your system.
4:45
So if you need the source code guys, you
4:47
can directly purchase it. If you still
4:50
face any issues, you can contact me
4:51
after payment. Automatically the source
4:53
code will be downloaded from Google
4:55
drive
4:56
and you will be able to see how I coded
4:59
this entirely in electron and react.
5:03
You'll see each and every component is
5:05
coded inside typescript. So this is your
5:07
fmppg library.
5:12
So these are all the components right
5:15
here. You'll see each and every
5:17
component is there. This is a timeline.
5:19
This is a toolbar component.
5:26
So the application will start here.
5:28
You'll see that again. You repeat the
5:30
process.
5:45
Then increase the diameter. Then at any
5:48
position you can split the video
5:52
delete.
5:58
You can even save the project as well.
6:00
So
6:13
that error message is just showing the
6:15
video is successfully saved. So this is
6:18
a complete project in electron guys. If
6:20
you are interested in this, the link is
6:22
given in the description. If you still
6:25
face any issues, I will definitely help
6:27
you. So it's actually using Fluent
6:30
FMPPG. As you can see, it's a fully
6:33
fleshed project desktop application.