Up next in 10
Build a Next.js PDF Editor & Renderer in Browser Using react-pdf & PDF-LIB Library in TypeScript
2K views
Jun 19, 2025
Buy the full source code of the application here: https://procodestore.com/index.php/product/build-a-next-js-pdf-editor-renderer-in-browser-using-react-pdf-pdf-lib-library-in-typescript/ Official Website: https://freemediatools.com
View Video Transcript
0:07
uh hello guys welcome to this uh live
0:10
stream so in this live stream I'll show
0:11
you a PDF editor that I developed inside
0:16
the browser using Nex.js
0:19
so you can even read your PDF files
0:22
right in the browser itself or you can
0:25
also edit your files as well so this is
0:27
actually the demo of this application
0:29
i'm running this on localhost 3000
0:33
and uh you can select any PDF file that
0:36
you want to edit or view inside the
0:38
browser so let me go to the documents
0:40
directory and simply select the PDF file
0:46
and as soon as you select the PDF file
0:48
here you will see you will be able to
0:49
read the PDF file it will show the PDF
0:52
file right in the browser itself it has
0:55
two pages so we have these previous and
0:58
next buttons so I can navigate to the
1:00
next page
1:02
and I can navigate to the previous page
1:04
then we also have these four activate
1:08
buttons here first of all the view so it
1:11
will you can uh read your file PDF file
1:15
then we also have the blur tool so it is
1:18
used to blur sensitive parts of your PDF
1:21
file so if I activate this so just tap
1:24
on this your tool is activated now if
1:27
you simply use your mouse and just drag
1:31
whichever portion that you want to blur
1:34
so it will be blurred out you will see
1:36
that
1:39
and then you can again go to the view
1:41
mode like this and read this then we
1:44
also have the erase tool as well this is
1:48
used to erase or delete text from the
1:51
PDF file so just
1:54
drag again using your mouse and that
1:56
text will be deleted
1:59
so again go to the view mode if you want
2:02
to do the modification on the next page
2:05
go to the next page again you activate
2:07
your erase mode let's suppose I want to
2:09
delete this so again I use this mouse
2:12
drag it so now this is deleted
2:16
so we also have the tool for adding text
2:18
here so simply tap on this and this
2:22
editor will show right here so here you
2:24
can add any text here it can be any
2:27
watermark that you want to put
2:31
so you can change the color here you can
2:34
even change the phone size
2:37
and we can place this accordingly
2:43
so once you are happy you can do this
2:48
so after that you have the button here
2:50
save PDF it will save all the
2:53
modifications and then your PDF file
2:55
will be downloaded so now you will see
2:58
all the modifications that you done
2:59
right here is there so this is the
3:03
nextJS project if you need the source
3:05
code of this project the link is given
3:07
in the description of this video you can
3:10
directly purchase the full source code
3:13
and uh you will get this source code
3:15
here the full directory structure
3:18
after you purchase it you will be
3:20
redirected to Google Drive where you
3:21
will get this zip file you just need to
3:24
extract the zip file so you can see the
3:26
overall application is divided into
3:27
multiple components it's coded inside
3:30
JSX and if I show you package.json you
3:33
will see we are using the latest version
3:35
of next and react
3:38
and for building this we are using two
3:40
open-source packages PDF lib and react
3:43
PDF these are two open-source packages
3:47
so React PDF is a library for rendering
3:50
PDF files specifically it's built for
3:53
React applications
3:55
and secondly PDF lib is a JavaScript
3:58
open-source package for editing PDF
4:01
files right in the browser itself so we
4:03
are using these two libraries for
4:05
building this
4:11
so this is a full fullyfledged PDF
4:14
editor right in the browser itself you
4:16
if after you purchase the source code
4:19
you will have full control you will get
4:20
to know how I developed this and you can
4:22
add more functionalities on top of this
4:25
you can modify the source code as well
4:28
so the link is given in the description
4:31
so once you purchase it's very easy to
4:33
start this npm rundev this will start
4:36
the development server on localhost 3000
4:39
before that you just need to say npmi so
4:42
this will install all the NodeJS modules
4:44
and create this folder so it's very easy
4:47
to start locally and also deploy this
4:50
application as well npm run build this
4:53
will build your application so this is
4:55
the overall application PDF editor right
4:57
in the browser itself we have used
4:59
Nex.js
5:00
and it's a fully fledged project if you
5:04
are interested
5:06
you can purchase the the link is given
5:08
in the description of the video and
5:11
please hit that like button subscribe
5:12
the channel as well and I will be seeing
5:15
you in the next live stream