Up next in 10
Build a React.js Canva PDF Ultimate Editor Using PDF-LIB & Fabric.js Library Web App in Javascript
Mar 21, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-pdf-ultimate-editor-using-pdf-lib-fabric-js-library-web-app-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/
Show More Show Less View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a
0:04
ReactJS PDF editor application that I
0:06
developed in the browser it's a single
0:08
page application which runs in the
0:10
browser and it's a PDF editor uh where
0:13
you can edit your PDF files using this
0:15
advanced editor something like Canva
0:17
Adobe Acrobat i have deployed this on my
0:20
free media tools.com website you can
0:22
access it live here and this is actually
0:24
the user interface so we select uh
0:28
whichever PDF file that you need to edit
0:30
here we'll simply select
0:32
this so as soon as you can see the PDF
0:35
file will load right here and this is
0:38
the first page you can navigate to the
0:39
second page right here you can see that
0:43
and after
0:45
this we have different controls out
0:48
there we can press this button here edit
0:51
PDF text so as soon as you do this you
0:54
will see now you'll be able to edit your
0:56
PDF text let's suppose I want to change
0:59
this this as well so just you need to
1:03
place the mouse here and then this will
1:05
change to editable so you can directly
1:07
edit the text right
1:09
here so it's so easy and then we have
1:12
different we can even add new text as
1:15
well by using this text control so if
1:17
you want to add some watermark you can
1:19
control the sizing here you can even
1:21
control the
1:23
color so if you just want to place it
1:27
you can control
1:37
it so then we also have support for line
1:41
through let's suppose we need to
1:42
highlight something so we can use this
1:44
control you can see
1:49
that again we can change the color here
1:52
using the color
1:53
picker and then if you want to highlight
1:56
or annotate something you can use this
1:58
pen
1:59
tool which will you can see you can
2:02
control the sizing here so if I go to
2:05
the next
2:06
page so there is a apply changes button
2:10
so if you make uh after modifying this
2:12
you just need to save this work for the
2:15
current page so simply press this button
2:17
you will see the changes will be saved
2:19
now you can navigate to the second page
2:23
and do the
2:27
editing so this is overall the
2:30
application
2:33
uh this is actually the react project
2:36
here you'll see that the link is given
2:38
in the description so if you are
2:40
interested you can purchase the full
2:41
source code you will get get the zip
2:43
file after you purchase it from Google
2:46
Drive automatically and if you just want
2:48
to try out the demo uh the demo is there
2:51
on my website
2:52
freemediatools.com PDF Canva editor at
2:55
the checkout page also the link is given
2:57
you can try out the demo first of all
3:00
you first of all load the PDF you make
3:03
the changes you can see
3:09
Then you go to the second page then
3:11
again you click edit
3:14
PDF you annotate something right here
3:18
again apply changes and then we have the
3:21
download file button so simply click
3:23
download so you can see the output is
3:27
modified here can see
3:30
that so this is ultimate PDF editor
3:33
which runs entirely in the browser you
3:34
can do almost everything annotate add
3:38
text you can edit the PDF text as well
3:41
so once you get the source code you can
3:43
even extend this application as well if
3:45
you want to add additional features you
3:47
will get the full source code here you
3:49
will see we have different components
3:52
here so now to run this application you
3:55
come to the terminal if you're running
3:57
it for the very first time after you get
3:58
the zip file you just need to say
4:03
npm I to install all the NodeJS modules
4:07
which are mentioned in the package.json
4:09
so this will create this node modules
4:12
folder after that
4:14
simply to create to start this
4:17
application npm run start so this will
4:19
start the development
4:21
server at localhost 3000 by default so
4:25
I've already running this you can
4:28
see if
4:30
I say localhost
4:34
3000 so already you can see the
4:37
application is running locally here so
4:40
in this easy way you can run this
4:44
application so the application will
4:46
perfectly work and then if you want to
4:49
deploy this the deploy command is npm
4:51
run build so this will build out your
4:54
application and create a build
4:57
folder right in the left directory so
5:00
this is if you want to deploy this this
5:02
is a command here and for building this
5:04
application if I show you the package
5:06
dojson file we are using actually some
5:10
opensource packages here if you see we
5:12
are using fabricjs we are using pdf lip
5:16
these are two javascript opensource
5:18
libraries for working with pdf fabric JS
5:21
is a animation library so these are all
5:24
the packages that we have used for this
5:27
it's entirely in
5:28
JavaScript ReactJS so
5:35
can so this is actually the PDF editor
5:38
guys if you are interested you can first
5:40
of all try the live demo and if you want
5:44
this the link is given in the
5:46
description you can purchase it after
5:48
the payment you will get this source
5:50
code uh in the zipped file you just need
5:53
to extract this and just follow the
5:55
steps that I showed you and thank you
5:58
very much for watching this video and
6:00
also check out my website as well
6:02
freemediatools.com which contains
6:05
thousands of tools regarding audio video
6:07
and image and I will be seeing you in
6:09
the next
#Business & Productivity Software
#Other
#Other