Up next in 10
Build a Next.js PDF Canvas Editor in Browser Using jsPDF,Html2Canvas in React.js Using JavaScript
Jun 19, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-pdf-canvas-editor-in-browser-using-jspdfhtml2canvas-in-react-js-using-javascript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:08
uh hello guys uh welcome to this live
0:10
stream so in this live stream I will
0:13
show you a PDF editor that I developed
0:16
inside uh the browser uh inside NexJS
0:20
and ReactJS so the editor something look
0:23
looks like this if you load this you can
0:26
see I'm running this on localhost 3000
0:28
port number and here you need to select
0:31
your PDF file which needs to be edited
0:35
or if you want to read this inside the
0:37
browser so here you simply select
0:40
whichever PDF file that you want to edit
0:43
so as soon as you select the PDF file
0:45
you will see the pages will display it
0:47
will to it will display the total number
0:49
of pages so only two pages are there in
0:52
this PDF file so this is the first page
0:55
and we have these controls which you can
0:57
see here we can go to the next page the
1:00
previous page and then we have the set
1:03
of controls out there on the left hand
1:05
side we can add text here as I click the
1:08
text tool right here we can add the text
1:12
here whatever text we can using this
1:14
color picker we can change the color of
1:16
the text as well we can place it
1:18
accordingly adjust the size using our
1:21
mouse and then we can repeat this go to
1:24
the next page again we can add this text
1:28
so this will save you a lot of time guys
1:30
this is a complete PDF editor right here
1:32
works in the browser and then we also
1:35
have the pencil tool to annotate
1:38
something to highlight something go to
1:41
the first page do this as well then we
1:44
also have the blur tool as well if you
1:46
want to hide something you can do this
1:48
you can control the size of the blur
1:51
like this after you make the changes now
1:54
we have the download button as you can
1:56
see if I click the download button this
1:58
model window will open and here you will
2:00
see the export button so as you will
2:03
export all the changes will be saved and
2:06
one by one it will go to all the pages
2:09
in the PDF and then your output file
2:12
will be downloaded in the browser so you
2:14
can see your output file has all the
2:16
changes that you have done the text
2:19
annotation the blur everything and you
2:23
the output file has been downloaded and
2:25
for building this application guys this
2:27
will be the directory structure if you
2:29
need the full source code the link is
2:32
given in the description of the video
2:33
you can directly purchase it after
2:36
purchasing it you will get the zip file
2:38
you just need to extract the zip file
2:40
this will be the directory structure all
2:43
the application is divided into multiple
2:45
components here you can see each
2:47
component is coded inside JavaScript
2:50
and if I show you the package.json file
2:52
for building this application we are
2:54
using JSPDF
2:56
uh HTML to canvas fabric.js so these are
2:59
all the three open-source libraries
3:02
inside JavaScript jspdf if you don't
3:05
know it's a PDF generation library in
3:09
JavaScript
3:12
and HTML to canvas is used for taking
3:15
screenshots inside your browser it's
3:18
also a JavaScript library and then we
3:20
have fabricjs library which is a
3:22
JavaScript animation library so these
3:25
are all the three open-source JavaScript
3:27
packages and also you can see we are
3:29
using the latest version of Nex.js JS
3:31
which is 13 and ReactJS which is 18 so
3:35
once you get the source code guys you
3:37
can directly modify the source code and
3:39
add additional features on this
3:41
application as well the link is given in
3:43
the description and uh once you do this
3:47
you just need to go to the terminal in
3:50
order to run this npm rundev so this
3:53
will start your application at localhost
3:55
3000 so just go to your browser if just
4:00
to run this application and this
4:02
interface will look something like this
4:04
and here you will select your PDF file
4:07
and uh whichever PDF file that you want
4:09
to edit and again this will come we have
4:13
all these tools we can annotate this
4:15
will save you a lot of time guys because
4:18
you don't need any external software you
4:21
can do this go to the next page then we
4:25
also have the blur tool If you want to
4:27
hide something you can adjust the size
4:29
here
4:31
you can even add the text feature
4:35
so the link is given guys in the
4:36
description if you need this it is coded
4:39
inside
4:43
uh nextJS and ReactJS
4:46
so this will be the directory structure
4:48
at the checkout page all the payment
4:50
options are there after you purchase it
4:53
automatically you will get the source
4:54
code from Google Drive and uh you can
4:58
see all the changes are taken place so
5:03
if you like this video guys then please
5:05
hit that like button subscribe the
5:07
channel as well and also check out my
5:09
website freemediatools.com
5:11
which contains unlimited number of tools
5:14
regarding audio video and image and I
5:17
will be seeing you guys in the next live
5:20
stream
#Business & Industrial
#Computers & Electronics