Up next in 10
Build a Next.js Canva Clone Image & PDF Editor in Browser Using jsPDF & PDF-LIB in TypeScript
Mar 13, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-clone-image-pdf-editor-in-browser-using-jspdf-pdf-lib-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, in this video I'll show
0:02
you I built out a full stack project in
0:04
NexJS. Uh it's actually a Canva clone
0:07
image and PDF editor which directly runs
0:09
in the browser. We are running it on
0:11
localhost 3000. This is actually the
0:14
demo. So with the help of this you can
0:16
have this background remover tool where
0:19
you simply select your image. After
0:22
selecting that image,
0:24
uh you will see the this is the original
0:26
image and this AI will run uh actually
0:30
remove the background and the image will
0:34
background is removed here and the
0:36
result is shown to you and now we have
0:38
this two buttons here. You can download
0:40
the output image very easily.
0:44
So you can just see here how easy it is.
0:47
I built out this application in nextJS.
0:50
uh it's actually using uh free
0:53
libraries. We are have we are not using
0:55
any paid API for removing the
0:57
background. If you are interested in the
0:59
source code, I've given the link you can
1:01
directly purchase the full source code.
1:03
So each and every component is divided
1:05
into its respective TypeScript file
1:08
here. So you can see it has multiple
1:10
components. So once you get the source
1:12
code, you will be able to see how I
1:14
coded this entire fullstack application.
1:16
If I show you the package.json file, we
1:18
are running it. We are using some
1:20
open-source libraries which are PDF lib
1:23
for PDF processing, JSPDF again a PDF
1:26
processing and TensorFlow. We are using
1:29
the TensorFlow library for the removing
1:32
the background and we are using the
1:35
latest version of text and react. And we
1:38
started this application at localhost
1:41
locally. It's very easy for you to
1:43
deploy this as well. npm rundev. So it
1:46
is simply running it locally. Apart from
1:49
that we also have the feature if you
1:50
want to change the background of your
1:53
images you simply select your image
1:56
file. After selecting that image file
1:58
this interface will open. So here you
2:00
can actually select a background color
2:03
uh from this color picker. Simply select
2:06
the color and click on this button
2:08
change background. After you simply
2:10
select the option the image background
2:13
will automatically change. This
2:14
background color will be applied here.
2:16
First of all, the background that you
2:19
see is removed here and then this
2:22
background color is applied here
2:24
automatically. Here you can also change
2:27
here. You can do this with any image. It
2:30
will save you a lot of time because you
2:32
don't require any software editor for
2:35
this. You can use this application. Once
2:37
you purchase the source code
2:39
automatically from Google Drive, the
2:41
source code will be downloaded and it's
2:44
actually using NexJS. It's a single page
2:47
application. All the processing is
2:48
happening directly in the browser. There
2:50
is no back end to it. All the
2:52
application it's a single page tool. And
2:54
then we also have the image to PDF tool
2:57
as well. So it's a ultimate tool. It has
2:59
a bunch of tools. First of all, we have
3:01
the remove background tool. Then we have
3:03
the change background tool. Then we have
3:05
this image to PDF tool. So this tool
3:09
also if you select a bunch of images
3:14
then
3:16
um after selecting the images the images
3:19
will be selected then you simply click
3:22
convert and after that all your images
3:25
will be converted to a PDF file here. So
3:28
it's really easy as you can see both the
3:30
images are successfully converted to a
3:31
PDF file. Then we also have the merge
3:34
PDF. So you basically select bunch of
3:38
PDF files and then it will merge those
3:41
PDF files for you.
3:47
So if I select a bunch of images here,
3:51
sorry, PDF file.
3:54
So as you select a bunch of PDF files,
3:57
[snorts]
3:59
now you can actually select the order.
4:03
You can even change the order as well
4:05
and click on merge PDF. So now the
4:08
output file will get downloaded
4:10
automatically.
4:13
So total pages also the three pages in
4:16
this file the two pages in this file is
4:19
successfully merged and you will see
4:21
this notification the total size the
4:24
total pages are successfully merged. So
4:27
it's an ultimate Canva clone image and
4:30
PDF editor. uh if you are interested in
4:33
this uh the link is given you can
4:34
directly purchase it and then PDF
4:38
simulator if you have a long PDF file
4:41
and if you want to split this across
4:44
multiple pages then you can use this
4:47
tool. So now it will need to specify
4:49
which pages you want to split. So from 1
4:52
to 23 this is here you can simply split
4:56
out individual pages as well. So this
4:58
will create 23 separate PDF files like
5:01
this.
5:03
And you can basically provide a range as
5:05
well. So if you want to split the
5:08
PDF from fifth page to 8th page. So here
5:12
you specify the ranges. You can specify
5:15
multiple ranges right here from 5 to 8
5:18
and then from
5:20
13 to 16. So now it will create two PDF
5:24
documents.
5:26
Here you can name your split.
5:30
So I can say split one, split two. So
5:32
now this will create two PDF files. If I
5:35
click the button right here, so two
5:38
files will be downloaded automatically.
5:41
The first one will be from page number
5:43
5th to page number eight.
5:46
Likewise, in this way you can split out
5:49
a long PDF into multiple pages. And then
5:52
we also have the tool for converting
5:54
your PDF into word do word word
5:56
document. This is a really premium tool
5:59
with the help of which if you have a PDF
6:02
file then you can convert that PDF file
6:04
into a doc file. So simply select your
6:08
PDF file
6:10
and then it will convert that PDF to
6:13
word document. So as you click the
6:14
convert button. So now the file is
6:18
successfully downloaded and now you
6:20
click the download button here.
6:24
So it says single page SAS software as a
6:27
service
6:29
tool. If you are interested in this
6:33
purchasing it the link is given in the
6:35
description. So each and every component
6:38
is coded inside Typescript.
6:43
So as you can see it the word document
6:46
has been
6:48
successfully
6:50
created.
7:00
So it basically converted that into docx
7:04
file here.
7:06
So this is a professional Canva clone
7:09
image and PDF editor. It has all these
7:11
six tools available. It's a single page
7:14
application. You can easily deploy this.
7:17
Once you get the source code, you will
7:19
be able to modify the source code or add
7:21
additional features as well. So the link
7:24
is given. You can directly
7:27
purchase it.