Up next in 10
Build a React.js PDF Canvas Annotation Editor in Browser Using PDF-LIB & react-pdf in JavaScript
334 views
Apr 1, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-react-js-pdf-canvas-annotation-editor-in-browser-using-pdf-lib-react-pdf-in-javascript/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 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:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a PDF
0:05
uh uh annotation editor that I developed
0:08
in React uh which I'm running it locally
0:10
if you see localhost 3000 and uh you can
0:14
see this is the interface uh you select
0:17
whichever PDF file that you want to edit
0:19
simply by clicking this button so let me
0:22
select the PDF file right here you will
0:25
see the PDF file will display and we
0:28
have these controls out there this is
0:30
page one of the two pages we can go to
0:32
the next page navigate through we have
0:34
all these controls available then we
0:37
also have the capability to add text
0:39
annotate as well so these are the
0:41
controls if you click text control and
0:44
you just need
0:45
to place the mouse here where at
0:49
whichever location just select the two
0:51
and just whichever location you can see
0:54
the text will be added
1:00
and we also have the capability this is
1:02
you can see the pencil icon is there so
1:04
you can highlight
1:06
something
1:10
that we go to the next page
1:14
uh we do the modifications here also
1:17
just select the pencil
1:19
tool can add some text as well right
1:22
here
1:25
and we can even change the color as well
1:28
so this is in the blue can also change
1:31
the color so now we also have the
1:33
download button so click on download you
1:36
will see the file will be downloaded and
1:39
uh all the changes that you have done so
1:41
add text annotate the changes have been
1:44
saved right here it's a very good tool
1:46
in reacts it's a static tool it doesn't
1:49
require any server to run and uh let me
1:53
show you the source code right here so
1:54
this is actually the source code
1:57
package.json file let me show you so we
1:59
are using the latest version of React if
2:03
you see we are also using this package
2:06
React PDF which is used specifically for
2:09
React for rendering the PDF and then we
2:11
are also using PDF lib library which is
2:14
a JavaScript library for uh editing PDF
2:17
files right in the browser itself
2:20
and simple command we are using so the
2:23
link is given in the description guys if
2:24
you need the full source code you can
2:26
directly purchase it and after
2:28
purchasing it we are simply
2:31
running to run this locally we come to
2:34
the project we simply run the command
2:37
npm so this will install all the NodeJS
2:39
modules which are mentioned in the
2:41
package.json file and then we simply say
2:43
npm run start so this will start the
2:46
local development server and actually
2:49
start this ReactJS application locally
2:52
inside your local development
2:54
environment and if you also want to
2:56
deploy this npm run build command is
2:58
there so you can easily build this
3:01
application if you are deploying it for
3:03
production so once you get the source
3:05
code guys you can see uh the application
3:07
is divided into the components right
3:11
here various components so each
3:13
component is coded inside uh JavaScript
3:16
and you will be able to edit this if you
3:18
are a developer to add additional
3:20
functionalities as well so the link is
3:24
given in the description you can
3:26
purchase the full source code very
3:28
simple project you come to the PDF you
3:31
add text at whichever location just
3:34
select the
3:35
tool and uh you can also annotate if you
3:39
want to highlight something
3:42
then we have the save button very simple
3:45
project but it's very powerful as well
3:48
so you will get to know about how I
3:50
coded this the full source code you will
3:52
get and
3:55
uh you can see
3:58
that it's a full application the link is
4:01
given in the description guys you can go
4:03
to my website procodestore.com after you
4:05
purchase it you will get this zip file
4:08
from Google Drive automatically we just
4:10
need to extract this zip file to
4:12
actually get this directory structure
4:13
just run npmi and npm run start so this
4:16
will start your reacts application
4:18
locally and you will be able to test out
4:21
you will see that
4:23
so if you are a developer if you are
4:25
looking for a job college student it
4:27
will be a nice practical project to
4:29
purchase it you will get this full PDF
4:32
editor and uh thank you very much guys
4:34
for watching this video and also check
4:36
out my website freemediatools.com which
4:39
contains thousands of tools regarding
4:41
audio video and image and one more uh we
4:44
are using this package guys here React
4:47
PDF i just want to show you React PDF is
4:50
a third party package for React for
4:53
specifically for creating PDF files in
4:55
the browser and server and apart from
4:58
that we are also using PDF lib which is
5:00
a JavaScript open-source library for
5:03
creating and modifying uh PDF files
5:05
right in the JavaScript environment so
5:07
we are using these two open-source
5:09
libraries
#Business & Productivity Software
#Development Tools
#Other