Up next in 10
Build a Next.js & React.js PDF Editor in Browser Using jsPDF,Html2Canvas & Fabric.js Using JS
0 views
Jun 19, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-next-js-react-js-pdf-editor-in-browser-using-jspdfhtml2canvas-fabric-js-using-js/ 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/
View Video Transcript
0:02
uh hello guys uh welcome to this uh live
0:05
stream so in this live stream i will
0:08
show you a pdf editor that i developed
0:11
inside nex.js which is a framework of
0:14
reactjs
0:16
so i developed this pdf editor which
0:18
runs entirely in the browser and it
0:21
doesn't need any sort of serverside code
0:24
it directly works in the browser it's a
0:26
static kind of an application and as you
0:29
can see it is running on localhost 3000
0:32
and here you will simply select a pdf
0:35
file this is actually the interface so
0:38
let me just select a simple pdf file and
0:42
as soon as you select your pdf file you
0:44
will see you will have a different kinds
0:46
of options we can add text we can
0:49
annotate highlight certain part in the
0:51
pdf document let me put this text tool
0:55
so as soon as you click this text tool
0:58
you can place the text anywhere so let's
1:01
suppose i want to put my channel name
1:04
logo coding sea we can even change the
1:06
color using this color picker you can
1:09
select your color and then align this
1:11
text accordingly in the pdf document and
1:14
this is the first page and here you can
1:16
see total number of pages are shown and
1:19
we can navigate to the second page now
1:21
again we can add this same watermark
1:25
so you can see how easy it is to edit
1:27
your pdf files using this nice little
1:29
editor that i made inside reactjs and
1:32
xjs after you make the modification now
1:35
we can simply click this button and this
1:38
will open this window and here you can
1:40
simply say export so this will export
1:43
all the changes it will take the
1:45
screenshot of all the two pages and then
1:48
it will download them as an output file
1:52
you can see now it downloads so this is
1:56
your first page this is your second page
1:58
all these two pages have contain your
2:00
watermark so you can see we have this
2:03
nextjs project guys the link is given in
2:06
the description if you want to purchase
2:07
the full source code of this project uh
2:10
let me show you the package.json file as
2:13
you can see we are using the latest
2:14
version of nex.js and then we also are
2:18
using react 18 and for building this
2:20
application we are using fabricjs html
2:23
to canvas and jspdf jspdf is an uh
2:27
open-source javascript pdf generation
2:30
library so you can see this is jspdf
2:34
html to canvas is used to take
2:37
screenshot of uh html elements
2:40
programmatically this is you can see and
2:42
then we also have fabricjs which is a
2:45
javascript animation library so these
2:48
are three open-source libraries guys
2:50
that we have used to basically build out
2:52
this pdf editor apart from that you can
2:56
even draw annotate something using this
2:58
pencil tool so if you want to draw
3:01
something in the pdf file you can
3:03
annotate it same you can change the
3:06
color using color picker
3:09
so again if i want to highlight this
3:11
section i can use this pencil icon to
3:13
highlight this then we also have this
3:16
blur tool as well if you want to blur
3:18
something if you simply click this
3:21
button this blur will show and you can
3:24
hide something in the pdf document like
3:26
this you can place it accordingly
3:29
in the second page let's suppose again
3:31
you want to blur something simply click
3:32
the tool and then it will using your
3:35
mouse you can adjust the size of this
3:38
blur section and you can blur the
3:40
section let's suppose if you don't want
3:43
to show something in the pdf document
3:45
this is the blur tool very simple and
3:49
all these tools are there and again if
3:52
you want to now export this simply click
3:54
the download button and now again click
3:57
the export button it will again export
4:00
everything so the link is given guys in
4:02
the description all the checkout at the
4:05
checkout page all the payment options
4:06
are available after you purchase it you
4:09
will get this zip file you just need to
4:11
extract the zip file this is will the
4:13
directory structure each application is
4:16
divided into multiple component it's it
4:18
is coded inside nex.js in javascript
4:22
and uh once you get the source code you
4:25
will also be able to modify the source
4:28
code as well it's very easy
4:31
you can see that
4:33
you can add additional functionality as
4:35
as well so it's a great starting point
4:37
if you want to learn how to build a
4:39
practical application in next year this
4:41
is a full pdf editor that i'm selling
4:44
the source code the link is given in the
4:46
description
4:47
so you can see that you can simply
4:50
extract it after extracting it if you
4:52
want to run it locally simply run the
4:54
command npm rundev this will start your
4:57
application at localhost 3000 so you
5:00
just need to go to your browser simply
5:02
type localhost 3000 and then your
5:05
application will start and then you just
5:08
need to select a pdf file here to get
5:11
started after you select it the
5:14
application will load and then you can
5:16
make the changes add text annotate
5:20
something you can blur the section as
5:21
well you have the pdf viewer you can go
5:24
to the second page like this we have the
5:28
blur tool as well so i shown you all the
5:31
functionalities that it supports guys so
5:33
the link is given in the description if
5:35
you like it definitely purchase it and
5:39
uh thank you very much for watching this
5:41
video guys and if you're watching it for
5:44
the very first time then please hit that
5:45
like button subscribe the channel as
5:47
well and uh thank you very much for
5:51
watching this video