Up next in 10
Build a Next.js Canvas PDF Editor to Add Images in PDF Document Using jsPDF & Fabric.js in TS
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-canvas-pdf-editor-to-add-images-in-pdf-document-using-jspdf-fabric-js-in-typescript/
Show More Show Less View Video Transcript
0:01
Uh hello guys, welcome to this uh live
0:03
stream. So in this live stream, we will
0:05
actually be talking about a really good
0:08
project, next year's project that I
0:10
developed and this project allows you to
0:13
actually add images inside your PDF
0:16
document. It is kind of a editor and you
0:19
can see that I'm running this project on
0:21
a local host 3000 port number. Let me
0:24
show you the live demo of this project.
0:26
So as I open this project localhost 3000
0:29
in my local development environment, you
0:32
can actually see this is actually the
0:33
interface here. You can actually drag
0:36
and drop your local images to this
0:38
editor right here. It's a canvas editor.
0:41
It works in the browser and uh you can
0:44
see that if we load the application,
0:47
this is the actual interface. There is a
0:49
dustpin icon and uh this is a plus icon.
0:52
If you want to add a new page in the PDF
0:54
document, you can add that. So now there
0:57
there are two pages out there. You can
0:58
see that this is the first page. This is
1:00
a second page. You can zoom in, zoom
1:04
out. These are the controls which are
1:05
given in the editor. And now the
1:07
business part of the application. Now
1:10
there is a option right here where you
1:12
can actually select your local images
1:14
from your computer. If you want to put
1:17
images in the PDF document, you need to
1:19
simply select that option. So as you
1:22
select guys uh this drop picker will
1:25
open file picker. Here you can select
1:28
your image files. Uh any JPG, PNG all
1:32
image types are supported. Let me select
1:34
the image. So as I select the image I
1:36
can just control the positioning of the
1:38
image in the PDF document. We can resize
1:41
the image like this. You can see that
1:44
using the mouse. You can maintain aspect
1:47
ratio. You can rotate the image as well
1:49
like this.
1:58
So you can see that guys uh you can
2:00
rotate it at any location in a 3D way as
2:03
well. So by pressing shift button on the
2:06
keyboard you can rotate this image as at
2:08
any accesses Y-axis Z axis. So after you
2:13
add this image this is the first image.
2:16
If you want to add the second image in
2:17
the second page let me select that. So
2:20
you will basically see this is actually
2:23
we have added the second image in the
2:24
PDF document. Now we have an option
2:27
right here. This is actually the export
2:29
button. So if you click this button uh
2:32
your image file PDF file will be
2:35
exported as uh it will be downloaded as
2:38
an attachment. If you open this PDF file
2:40
this is the image you can see it has
2:42
added in the first page. This is the
2:44
second image which has been added in the
2:46
second page. So this is actually
2:48
basically an image to PDF editor guys
2:50
which runs in the browser and when you
2:53
open it the very first page will be
2:55
there. It will be a blank page. Here you
2:57
can actually select whichever image that
2:59
you want to add right here. You can
3:02
actually resize this image. You can
3:04
change the size here with the mouse. You
3:06
can control the positioning right here
3:08
as well. You can see that.
3:11
And uh if you want to add a new page,
3:14
click this button. So now this image
3:16
will be this uh new page will be there.
3:19
So if you add this you will see the
3:21
pages will get added. So if you click
3:23
this button a new page will be added in
3:25
the PDF document. And there is this
3:27
dustpin icon guys. If you click this
3:29
dustpin icon the image will be removed.
3:32
So if you want to add a new image you
3:35
can add this like this. If you click
3:37
this the image will be removed. These
3:39
are the actual controls guys of the
3:41
application that I showed you. You can
3:43
rotate the image. Everything you can
3:44
perform.
3:46
So it's a nice little editor where you
3:49
can actually add images.
3:52
You can also add multiple images as
3:54
well. Just select it in a single page.
3:57
You can even add multiple images. So now
3:59
we have added two image in the first
4:01
page. You will see that
4:04
you can resize them. So now there are
4:06
two images present. You can even add
4:09
three images as well. Just resizing it
4:12
to fit in a single page.
4:15
So you can see that. So now there are
4:17
three images present in the single page.
4:20
Now we come to the second page. We
4:22
select.
4:28
So now if we are done right here
4:32
we can actually
4:34
we can select here
4:40
we need to select the page right here.
4:44
So this is the image which is added. So
4:46
select this page.
4:49
So in all the pages the PDF you can see
4:51
the image is added. Now we can export
4:53
the PDF document. So you will basically
4:56
see the images are added right here.
4:58
This is first image, second image, third
5:00
image. This is the thing you can see
5:02
that in all the pages. So this is a very
5:04
handy edit guys. You can control the
5:06
positioning, resize it using your mouse.
5:08
So it is coded inside next.js and it is
5:11
using JSPDF. You can see that and also
5:14
it is using fabricjs and these are the
5:17
two libraries it uses. It's a nextJS
5:19
project. If you want to purchase the
5:21
full source code guys of this project,
5:23
the link is given. You can directly go
5:25
to my website e-commerce website
5:27
procordstore.com and purchase the full
5:30
project along with full documentation
5:33
and I will give you full support if any
5:36
problem occurs after the purchase and uh
5:38
if you are interested the link is given
5:40
in the description. After you purchase
5:42
it from my website, you will be
5:44
automatically be redirected to Google
5:46
Drive and you will actually get this zip
5:48
file that you will see. The size of the
5:51
zip file is 181 mgabyte. So you just
5:54
need to extract this zip file. It will
5:57
actually give you all this directory
5:58
structure of this project and simply you
6:01
just need to execute this command which
6:04
is npm rundev. This is actual
6:06
development script. It will start your
6:09
project on localhost 3000 and uh I have
6:14
also given the live demo link where you
6:16
can actually try out this application on
6:18
my e-commerce website where I have given
6:20
the link of I have deployed this project
6:23
on a live website where you can
6:25
experience this editor. So on the check
6:27
out page you will see a live editor live
6:30
demo link where you can actually try out
6:31
this application before purchasing it.
6:34
So the link is given guys you can
6:35
directly go to my website and purchase
6:37
this project. It's a very highly
6:39
engaging project. You can add multiple
6:41
images to your PDF document using this
6:44
nice little editor. We need to select
6:46
the image file and you can position it.
6:49
You can rotate it. You can resize it.
6:51
You can add multiple images as well. And
6:53
then there is an export button right
6:55
here. It works entirely in the browser
6:57
guys. No serverside code is involved. It
6:59
is entirely runs in the browser. It's a
7:01
fully client side application and it's
7:04
using Nex.js. You will see a single file
7:07
is there. PDF editor dot it is coded in
7:09
Typescript and you can see that it's a
7:12
very long project and about uh 289 lines
7:16
of code is there you will see that it's
7:18
a pretty large project and if I come to
7:20
the package dojson so we are using these
7:22
dependencies fabric js jspdf so if you
7:26
don't know about fabricjs guys it's a
7:28
graphics library
7:31
JavaScript canvas library which allows
7:33
you to make this awesome little
7:35
applications canvas it's open-source
7:37
library and we are actually using that
7:40
and also we are using JSPDF which is
7:42
actually a JavaScript PDF generation
7:45
library. This is their official
7:47
documentation official website the
7:49
leading HTML 5 client solution for
7:52
generating PDFs in the browser. So we
7:54
are using JSPDF and we are using fabric
7:57
JS. So if you are interested in this
7:59
ReactJS image to PDF editor guys the
8:01
link is given on my e-commerce website.
8:04
you can directly purchase it and a live
8:06
demo link is also given so you can try
8:09
out this application before purchasing
8:10
it. So I will give you full support if
8:12
you have any problem in deploying this
8:14
application. So now to deploy this guys
8:17
it's very easy you can use digital ocean
8:19
or versel to actually deploy this
8:21
application and uh now to build this
8:25
application there is a build command as
8:26
well given npm run build. So just run
8:29
this command and it will actually create
8:32
an optimized production build for your
8:34
application in the root directory. It
8:37
will create a folder a next folder where
8:42
you can actually
8:44
deploy this nextjs application. So if
8:46
you're watching it for the very first
8:48
time guys please hit that like button.
8:50
You can see that it has been done that.
8:54
So you can run this development npm
8:57
rundev. It will first start your local
9:01
host 3000. It will if you're watching it
9:04
for the very first time guys, please hit
9:06
that like button. Subscribe the channel
9:08
as well. And please share this video
9:10
with your friends if and also share my
9:14
channel. And if you have still some
9:16
questions regarding this, you can ask in
9:18
the comment section. I will reply to all
9:20
the questions. So I showed you guys it's
9:23
a very engaging editor. You can add
9:26
multiple images on a single page.
9:28
Control the positioning, resize it. You
9:31
will see that very engaging editor, very
9:33
fast, efficient and it works pretty much
9:36
every time. So you can take any image
9:38
for example. It's very useful guys in
9:41
online because we need to convert or
9:44
export our images to PDF documents. So
9:46
it's a very nice project and you can
9:50
even show to your developer. Let's
9:53
suppose you are working in a college or
9:55
if you are a student if you are want to
9:57
get a job. [snorts] So it's a very nice
9:59
project that you can show to your inside
10:03
your college. So it is coded in
10:06
Typescript. Coming back to the code. So
10:08
this is actually the component we are
10:10
importing fabric jspdf
10:13
and this is the client side component in
10:15
nextjs. So if I show you package.json we
10:18
are using nextjs 14 version react 18
10:21
version. So it is compatible with all
10:23
the latest version of react and next. So
10:26
no need to worry about the
10:27
compatibility. It's compatible with all
10:29
the versions. You can directly purchase
10:31
it. The link is given in the
10:32
description. This will be a single PDF
10:35
editor or typescript file you will get.
10:37
So all the project files you will get in
10:40
the zip file. So documentation will also
10:43
be given and I will give you full
10:44
support if you still have any sort of
10:46
problem. So thank you very much guys for
10:49
watching this video and I will be seeing
10:51
you in the next one.