Up next in 10
Build a React.js Ultimate Canva Image & PDF Editor Clone Using Fabric.js & jsPDF in Browser Using JS
Apr 1, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-ultimate-canva-image-pdf-editor-clone-using-fabric-js-jspdf-in-browser-using-jsx/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a
0:05
ultimate Canva clone uh image and PDF
0:07
editor that I built inside the browser
0:09
using ReactJS and it's a single page
0:12
application which runs entirely in the
0:14
browser no server code is involved so I
0:16
have deployed this website here on my
0:19
website freemediatools.com Canva image
0:21
and PDF editor so this tool something
0:24
looks like this and here first of all we
0:27
have the little bit of canvas right here
0:30
where you will draw something and then
0:32
we have all the exporting options right
0:34
here we can export them to PDF SVG PPT
0:38
HTML and image file and you can even
0:41
save your template as a JSON file as
0:43
well and later on load this so first of
0:46
all here you can change the canvas size
0:48
by default it comes with 800 width and
0:51
500 height so first of all here you need
0:55
to add a image file to the canvas you
0:58
can see we can add this
1:01
image so you can add multiple pages as
1:04
well so we have also the page
1:06
functionality as well so we can also
1:08
apply a background
1:10
color using this color picker you can
1:13
pick any
1:14
color so this is really useful editor
1:17
guys if you are wanted to make any sort
1:19
of YouTube thumbnail or social media
1:21
template thumbnails you also have the
1:24
option right here if you see add text
1:27
you also have the option to add text
1:29
right here so as soon as you do this you
1:31
will see
1:32
this this text will be there you can
1:35
just control the sizing here with the
1:37
mouse here each element you can place it
1:40
accordingly in the canvas and then you
1:42
can simply edit this
1:49
So you can see that so if you tap on the
1:53
text element you will see additional
1:55
properties here you can actually change
1:57
the phone family you can change the
1:59
phone size letter
2:00
spacing can change the text color you
2:03
can change the text color and you can
2:06
even change the background color of this
2:08
so let's suppose you have to have a
2:10
different background here
2:19
so so you can just see you can customize
2:22
everything right
2:24
here and then we also have uh you can
2:27
change fonts here all these fonts you
2:30
can select any font of your choice so
2:33
this actually similar to Canva which
2:36
actually have multiple fonts here from
2:38
this drop-down you can actually select
2:40
all the major phones which are there
2:42
simply
2:45
select so you can see that so as soon as
2:48
you
2:58
select so now if you want to export this
3:01
we have this export option right here
3:03
you can export them as a image click it
3:06
you will see it will export this as a
3:08
PNG
3:10
image then we can even export them to a
3:13
HTML
3:15
file so this is you can see it exported
3:17
as an HTML then we also have the option
3:20
to export them to a PPT file which is a
3:22
PowerPoint presentation as soon as you
3:25
click it you will see the slide will be
3:27
created and then we also have to export
3:30
scalable vector graphics so SVG file you
3:33
will see that the file will be created
3:36
it's ultimate editor guys and also we
3:39
have the option to export them to a PDF
3:41
file so as soon as you do this it will
3:44
be exported to PDF file so it is and you
3:47
can even export them to a JSON
3:50
so so this template will be saved and
3:54
you can even add multiple pages here
3:56
let's suppose I want to add another page
3:58
so this is actually a second page let me
4:00
have a different background color for
4:02
this so this will save you a lot of time
4:05
guys you can see that so again we can
4:08
add text right here now we have two
4:10
pages we can add another page or we
4:13
change
4:16
this again just click add
4:20
text so now we have three pages so once
4:23
I click the export button guys you will
4:25
see export as PDF now it will create
4:28
three pages you will see that now it has
4:31
three pages in the PDF first second
4:34
third so in this easy way you can create
4:36
multi-pages PDF files you can even
4:39
create let's suppose PPT file here so it
4:42
will actually create PPT file with these
4:45
three slides this is the first slide
4:47
second slide third slide so same goes
4:51
for image so it will actually create
4:53
three images will capture the screenshot
4:56
of each page that you created you'll see
5:03
that so you can access this guys live
5:06
demo at this link and my website so if
5:08
you are interested in purchasing this
5:10
project react project uh the link is
5:14
given in the description so it is coded
5:16
entirely in ReactJS you can see we are
5:18
using the libraries called as JSPDF
5:21
fabric JS so these two libraries are
5:24
open-source JSPDF library if you don't
5:27
know it's a PDF generation library in
5:30
JavaScript and this is their package uh
5:34
so it's almost 2 million weekly
5:36
downloads and then we also using
5:40
fabric JS which is a JavaScript
5:43
animation
5:44
library opensource
5:52
so this is fabricjs so we are using this
5:56
package as well so we are using these
5:58
two libraries for building this and you
6:00
can just see this is your package.json
6:03
file so once you purchase the source
6:04
code guys the link is given you can go
6:06
to my website
6:07
procodestore.com you will get this zip
6:09
file after you purchase it you will be
6:12
automatically redirected to Google Drive
6:15
where you will get this zip file and now
6:17
if you're running it for the very first
6:19
time after you extract the content you
6:21
will see this directory structure each
6:23
component is coded inside JSX file here
6:26
if you
6:27
see so each component here is coded
6:30
inside its appropriate JSX file so if
6:33
you are a developer if you are a student
6:35
this will be a good project to purchase
6:37
you will get to know about how I built
6:39
this entire project from scratch before
6:41
purchasing it you can try this live demo
6:44
at the check out page also I've given
6:46
the link so after purchasing it now to
6:49
run this file run this project you first
6:52
of all say npmi so this will install all
6:55
the NodeJS packages and it will create
6:57
this node modules folder after you do
7:00
this you just need to run this project
7:03
and for running this project we have the
7:05
command here npm rundev so this will
7:08
actually start your development server
7:10
localhost 5173 so now instead of running
7:14
it locally we can run this locally
7:16
project if you see that now we are
7:19
running it locally here so it is that
7:21
easy you can now again do the same thing
7:25
you can add
7:28
text if you want to add images you can
7:31
add
7:32
images you can see that how easy it is
7:35
to reposition everything text image then
7:40
we also have different kinds of shapes
7:42
if you see if you want to convert your
7:45
image to a circle you can even do that
7:47
as well using this square triangle you
7:50
can see
7:54
that and uh
7:57
here you can see that we have different
7:59
shapes here so in you can see that we
8:04
have a circle shape right here
8:07
we also you can see just click on the
8:10
shape name and it will actually insert
8:12
this into the canvas you just need to
8:14
click it if you want to hide some
8:16
elements we have also this hide button
8:19
so now just click on the individual
8:21
element name and
8:23
then you
8:25
can make them hide or show you can
8:29
toggle the visibility by hitting these
8:31
buttons so it's very easy to remove
8:33
elements from the canvas just click on
8:35
that and just click hide so it's very
8:40
easy
8:42
so we also have additional properties
8:45
here the shadow you can even control the
8:47
shadow just click on the element and
8:49
here you
8:50
can just create shadow effect which is
8:54
similar to Canva if you see this shadow
8:56
has been added so it's a advanced editor
8:59
guys canva clone editor which supports
9:02
all these functionalities you can export
9:04
them to
9:05
PDF so definitely try this and if you
9:08
are interested the link is given you can
9:10
purchase it from my website uh once you
9:13
purchase it you will get the full source
9:15
code and if you are a developer then you
9:17
can even add additional functionalities
9:19
to this it's a very simple coded project
9:22
and you will understand all the code and
9:25
you will be able to edit this code as
9:27
well if you want to add additional
9:29
functionalities to this project so it's
9:33
coded inside JSX and the latest version
9:37
of ReactJS which is about 18 so you can
9:40
see it is compatible with the latest
9:42
version so it's a nice project that you
9:44
can purchase it it will be good for you
9:48
we can add multiple pages here you can
9:50
see that so for each page we can change
9:52
the properties
9:54
here
9:56
so this is a thing guys if you are
9:59
interested you can try this first of all
10:02
and then if you are interested the link
10:04
is given in the description so thank you
10:06
very much guys for watching this video
10:08
and also check out my website
10:10
freemediatools.com which contains
10:13
thousands of tools regarding audio video
10:15
and image and I will be seeing you in
10:17
the next video