Up next in 10
I Built this React.js WYSIWYG PDF Editor Passive Income 10$/Month Web App Using PDFMake in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-react-js-wysiwyg-pdf-editor-passive-income-10month-web-app-using-pdfmake-in-browser/
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 welcome to this video so
0:03
in this video I will show you a react
0:04
Chas
0:06
application which I developed if you
0:08
want to export uh PDF directly inside
0:12
the editor so this is my viig editor if
0:16
you see we have the visic editor so
0:19
whatever I write right here it will be
0:21
live
0:22
preview so you can see that as I'm
0:24
writing
0:28
here automatically on the right hand
0:30
side uh this will be rendered in the PDF
0:34
documents so you will able to see you
0:37
have all the rich controls which are
0:38
there in a visic editor we will able to
0:41
change the heading we can write any text
0:45
we can even have the capability to add
0:47
images as well in this visic editor you
0:50
can directly embed any
0:52
image and it will go to the next page
0:55
and just choose the image accordingly
0:57
which let's suppose I choose choose a
1:00
image which can be residing in
1:06
that you can see that so on the right
1:08
hand side you will see the live review
1:10
of this in the PDF document so if you
1:14
click on download you will see you will
1:16
be able to save your PDF document so
1:19
right in the browser itself you will be
1:21
able to create PDF documents which
1:23
contains text images with this nice
1:25
little visic editor inside react chairs
1:28
so this is actually a good stat static
1:30
tool that you can deploy on your own
1:31
website to earn a lot of passive income
1:33
so you can change the underline the text
1:36
you can
1:37
also change the background color can
1:41
highlight this you can see
1:44
that you can even change the color of
1:47
the text let's suppose I want to change
1:49
it
1:50
to a different color uh let me change it
1:54
to blue color you can again see it is
1:57
reflected back
2:00
there is also a print option as well so
2:02
you can directly print this document as
2:04
well right in the browser itself you can
2:07
write the actual document and then side
2:09
by side you can also print it as well so
2:12
this is a complete project guys I'm
2:14
giving you the link is given in the
2:15
description you can check out the
2:17
payment link and actually purchase the
2:19
full source code which will contain the
2:21
full directory structure after the
2:24
payment you will be redirected to Google
2:26
Drive where you will actually get the
2:27
zip file you just need to extract the
2:29
zip file
2:30
which will contain this directory
2:31
structure which will contain this main
2:33
file which is coded inside typescript
2:36
you can see we using quite a number of
2:38
thirdparty packages and you can see we
2:41
are using the latest version of react
2:43
which is react
2:44
18.3 and we are also using these third
2:47
party libraries which is quill which is
2:50
the visic editor and then we are using
2:52
PDF make library for actually generating
2:56
the PDF document so let me show you one
2:58
by one the third party pack packages so
3:00
Quil if you don't know it's a viic rich
3:03
text
3:04
editor and
3:06
it's provides you with all the rich
3:08
controls out there so we're using this
3:10
open source library and then we are also
3:13
using this Library which is PDF make
3:16
which is used to generate the PDF
3:18
document right in the browser itself so
3:20
if you just write PDF make they do offer
3:22
their nodejs package as well so it's a
3:25
very popular package 7 84,000 downloads
3:30
this is their official website pdf.org
3:33
so we are using this client server
3:37
PDF generation library in pure
3:39
JavaScript so we have used this library
3:41
inside our react CH project to build to
3:44
build this complete project so as soon
3:46
as you're writing right here you will
3:48
see automatically it will generate the
3:50
live preview and you will be able to see
3:53
on the right hand side you can add text
3:56
you can add images as well you can see
3:59
that it can span into multiple Pages as
4:01
well so it will automatically detect if
4:03
the image is larger then it will split
4:06
across multiple pages so the image will
4:08
come on the next page this is a complete
4:11
project guys if you are a student if you
4:13
are a college going student this will be
4:14
a great project you will be getting to
4:17
see how I coded this project so to run
4:20
this project is quite easy you simply
4:23
after you extract the zip file just npmi
4:27
to install the nodejs modules and then
4:29
simply run this command npm R Dev so
4:32
this will start the development
4:35
server and if you want to deploy this
4:38
website deploy this app you just run the
4:41
command npm run build so this will build
4:43
out your
4:45
application and
4:48
uh like this so if you are interested
4:50
guys the link is given in the
4:52
description of this project you can
4:54
directly purchase it you will get this
4:57
full directory structure and it actually
5:00
runs in like this I've shown you so
5:02
thank you very much for watching this
5:03
video and also check out my website free
5:07
mediat tools.com and lastly I want to
5:09
show you passive income so this tool
5:11
that I showed you I deployed this on one
5:14
of my website which is approved using
5:17
ISO and you can see on a daily basis I'm
5:20
earning a lot of passive income so on
5:22
each day this is the last 7 days so this
5:25
tool is giving me this passive income
5:28
every day
5:30
some passive income we also have AdSense
5:33
as well approved so you can even see the
5:36
AdSense income as well from each day it
5:38
is giving me some pass passive income so
5:42
this is a nice tool guys you can place
5:44
advertisements once you purchase the
5:45
full source code you will actually get
5:47
this
5:48
entirety of this PDF editor if you are
5:51
interested you can directly purchase it
5:54
the link is given in the description and
5:56
I will be seeing you guys in the next
5:58
video
#Business & Productivity Software
#Other