Up next in 10
Build a React.js Canva Clone Image & PDF Canvas Editor in Browser Using jsPDF & Fabric.js in TS
Apr 1, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-clone-image-pdf-canvas-editor-in-browser-using-jspdf-fabric-js-in-ts/
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'll show you a react
0:06
Canva clone uh image and PDF editor that
0:08
I had made it's a canvas editor and it's
0:11
a single page static application which
0:13
runs in the browser i literally deployed
0:16
this uh tool right here you can try this
0:18
tool on my website
0:20
freemediatools.com and uh this is
0:22
actually the tool right here we see the
0:25
canvas appearing you can change the
0:27
width and the height of the canvas so by
0:29
default it comes with 500 500 but we can
0:33
change it very easily so you can see
0:35
automatically it will
0:37
change so whatever thing need to do and
0:41
then we have a set of controls out there
0:43
uh we can add different kinds of shapes
0:45
we can add text image then we can export
0:48
them into image and PDF as well so now
0:50
let's suppose I add a shape right here
0:53
so you can change the color here so as
0:55
you click on the individual element the
0:57
on the right hand side the properties
0:59
will come right here here you
1:02
can just control it with your mouse the
1:05
width and the height and then you can
1:07
change the color as well so you can see
1:09
that you can even control the opacity as
1:13
well by
1:15
this by default it is one you can add
1:19
circle you can add rectangle as well
1:23
so let me also change this
1:26
color so uh we also have the dark theme
1:30
as well if you want to work with a dark
1:31
theme you can do that and then we have a
1:34
bunch of buttons here if you want to
1:36
export this canvas to a PNG image so you
1:38
can see that the image has been created
1:42
and similarly if you want to convert
1:44
this into a PDF just click the PDF
1:47
button and you will see the canvas will
1:49
be exported to PDF similar to Canva and
1:52
now if you want to delete this element
1:54
you click the dustpin icon to delete
1:56
this element from the canvas and now
1:59
let's suppose I want to uh add a image
2:02
to the canvas so I select a local image
2:05
from my computer and add this to the uh
2:09
canvas right here so we can even add
2:11
text so we have the text control so you
2:15
can see that we can just
2:18
make so this can be used for various
2:21
purposes it can be used to edit your
2:23
images make a YouTube thumbnail as well
2:25
so it's a social media Canva kind of a
2:30
clone so here you can change the text
2:32
color
2:34
accordingly so if you want to export
2:36
this now you'll see
2:38
that the result has been
2:40
exported same goes with the PDF as well
2:43
so this is actually a Canva clone guys
2:46
canvas image and PDF editor built inside
2:49
ReactJS and uh if you want to purchase
2:53
it first of all try out the demo right
2:55
here on my website and then if you are
2:57
interested the link is given in the
2:58
description uh which it coded inside
3:01
ReactJS if I show you the package JSON
3:04
file you will see that it's built using
3:06
fabric JS and JSPDF fabric JS is
3:10
actually a JavaScript open-source
3:13
animation library which allows you to
3:15
make these uh animated uh canvas editors
3:20
and JSPDF is used for exporting the
3:22
canvas to PDF so you can see we are
3:25
using the latest version of React which
3:26
is 19 at the time of recording this
3:28
video so it's compatible with the latest
3:31
version and whenever you are running it
3:33
uh for the very first time after you
3:35
purchase the source code you will get
3:36
this zip file you just need to extract
3:39
the zip file and you will see each
3:41
component is coded inside it's a
3:43
TypeScript file right here so the
3:46
project is fully made using TypeScript
3:48
every component is splitted across
3:50
multiple components so it will be very
3:52
easy for you to understand once you
3:54
purchase the source code uh you can even
3:57
edit the source code if you are a
3:58
developer or add additional
4:00
functionalities as well and uh this is
4:03
actually so if you're running it for the
4:05
very first time after you purchase it
4:07
just go to the terminal and just after
4:10
extracting it just type this command
4:12
here npmi so this will install all the
4:15
modules which are mentioned in the
4:17
package.json file and just create this
4:19
node modules folder and after doing this
4:22
you just need to actually run this
4:25
application
4:26
locally by npm run build npm
4:32
rundev so this will start the
4:34
development server on localhost
4:37
5173 so if I try to show you by typing
4:40
this address localhost 5173 so you will
4:44
be able to
4:46
locally run this application you can see
4:48
the application is perfectly working you
4:51
can add images text different kinds of
4:53
shapes to the canvas
4:55
editor and let's suppose I want to make
4:58
a YouTube thumbnail so 1280 by 720 which
5:01
is the size of the canvas you can see
5:03
you can change the canvas size as
5:06
well then you can add different text
5:10
shapes
5:13
and then we have the option to export
5:15
this to a
5:16
image and then we also have the option
5:19
to export this to the PDF so you can
5:21
basically try this guys the actual tool
5:24
is live on my website freemediatools.com
5:26
before purchasing it if you like it then
5:28
the link is given in the description you
5:30
can directly purchase it and uh it's
5:34
built as I already told you using
5:36
open-source packages so you can see
5:39
fabric js we are using this JavaScript
5:42
animation canvas library apart from that
5:44
we are using JSPDF which is a PDF
5:47
generation library for JavaScript for
5:49
generating the PDF documents so we are
5:51
using these two packages here for
5:53
building this PDF canvas editor such
5:55
something like Canva so if you're
5:57
interested guys the link is given in the
5:59
description just purchase it and if you
6:01
are a collegegoing student or if you are
6:03
looking for a job then it will be a
6:05
great project to purchase it and you'll
6:08
be able to see how I uh make this
6:11
project if you want to build this
6:13
project the command is simple npm run
6:16
build so just run this command if you
6:18
want to deploy this onto a real domain
6:20
name it will create this dist
6:22
folder so minified JavaScript and HTML
6:26
so you can easily deploy this uh source
6:28
code as well project as well so thank
6:31
you very much for watching this video
6:32
and also check out my website
6:34
freemediatetools.com which contains
6:36
thousands of tools regarding audio video
6:39
and image and I will be seeing you in
6:41
the next video
#Design
#Photographic & Digital Arts
#Programming
#Skins, Themes & Wallpapers