0:00
I'll show you a browser based Canva
0:02
clone editor that I built inside ReactJS
0:04
and NodeJS and Express. I have deployed
0:07
this on this website free media tools.
0:09
I've given the demo link in the
0:11
description of this video. You can check
0:13
out this demo of this editor. So once
0:16
you land on this, you can actually
0:19
change anything. You can add text,
0:22
images, everything. You can customize
0:25
everything and click on export to export
0:28
this to an image file. And we can even
0:30
export this to a PDF file. Go to file
0:36
all pages as PDF. So it can even export
0:38
this to PDF as well. So this is the
0:41
overall project here. Uh
0:44
I have given the link you can directly
0:47
purchase the source code. So once you
0:49
purchase it, you will get this directory
0:52
And uh now to run this project
0:58
you simply say npm run start after
1:00
installing the node packages npmi.
1:04
So just run this it will start this
1:06
project locally at localhost 5173.
1:10
So once the project starts you can run
1:15
locally as well like this. So you can
1:19
add multiple pages. If you
1:22
want to delete this page, you can delete
1:24
this. So now you can customize the
1:27
color. Then you can add your own text
1:30
here. Just add this widget.
1:35
You can control the sizing from here as
1:37
well. Just control it.
1:49
So it's very simple here. You can just
1:51
see here after that you also have
1:53
support for adding your own images.
1:59
So you can just see here
2:04
you can control the transparency.
2:07
This is a layer based editor. So each
2:10
element has its own layer. So here you
2:13
can control more properties. Here it
2:15
comes with all the fonts which supports
2:18
you can select any font here
2:26
can customize it. Then we also have
2:28
different frames you can add.
2:32
Different shapes are also there.
2:34
Different images third party images.
2:37
We also have a different templates as
2:47
So you can also export this page to a
2:50
PDF file as well or an image file. So
2:52
it's very good editive for building out
2:57
So very similar to Canva. So once you
3:00
purchase it, you will get the source
3:02
code. It's very easy to understand the
3:05
source code as well. So as you can see,
3:07
we are using the latest version of React
3:09
18.2.0. zero and in the back end we are
3:13
using NodeJS and express.
3:19
So you can just see here we using
3:25
So each component is divided here. You
3:27
can see these are all the project here
3:30
divided into multiple components.
3:33
So it's a full stack project. Definitely
3:37
try it first of all by visiting the demo
3:40
link. If you like it, then you can
3:43
You can even create a new design with a
3:52
like this. So any size you can go to
