Up next in 10
Build a React.js Job Resume & CV PDF Editor in Browser Using TailwindCSS in TypeScript
Feb 26, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-job-resume-cv-pdf-editor-in-browser-using-tailwindcss-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:03
in this video, I'll show you I built out
0:05
a job and rumé CV PDF editor. So where
0:10
you can actually make your rumés and CVS
0:13
if you are applying for a job. So it's
0:15
an all-in-one
0:17
editor with live preview. You have all
0:20
the functions. So we are running this
0:21
project on localhost 5173. So it's
0:24
directly built inside ReactJS. So as you
0:27
can see we are using the latest version
0:30
of react which is 90
0:33
and we have also used tailwind CSS as
0:36
well for the user interface. So you can
0:38
see this is actually the full directory
0:40
structure of the project. So if you need
0:42
the source code of this you can directly
0:44
purchase it the link is given in the
0:46
description. So after you purchase it
0:48
you will get the source code
0:49
automatically from Google drive. So I
0:52
built this project from scratch. So each
0:54
component as you see is coded directly
0:56
inside Typescript. So it's fully
0:58
customizable
1:00
and we are running this project locally
1:02
as you can see npm rundev. So it started
1:04
this local development server. So now
1:08
coming back to the application it's a
1:09
simple rum and CV editor. So right here
1:14
you can change the profile picture, the
1:16
name of the person, email address,
1:18
everything is customizable. So right
1:20
here you just need to change can
1:23
customize the picture right here you'll
1:25
see.
1:28
So this is actually the basic info. So
1:31
here you can change the name.
1:36
So then now if you just want to export
1:39
this to a PDF so you can simply save
1:42
this and this rum will be saved.
1:52
So if I try open this you will see the
1:55
rum is there with the updated profile
1:57
picture name everything. So [snorts]
2:00
it's directly easy. So you can actually
2:03
customize everything right here. You can
2:05
change the
2:09
you can add your own GitHub link, your
2:12
email address, everything.
2:16
So as you make the changes automatically
2:18
the live preview all the changes will be
2:20
reflected back. So you can also add more
2:23
websites as well by just clicking the
2:25
plus icon. So,
2:28
so it's very easy to actually customize
2:31
this. From the left hand corner of the
2:33
screen, you can edit this basic info
2:36
information. So,
2:40
coming back to the title, you can add
2:42
more titles as well.
2:45
So, directly you highlight a particular
2:47
section that you want to edit and you
2:49
can edit this by clicking the left hand
2:51
corner of the screen and directly
2:52
editing that stuff. just changing the
2:55
text replacing clicking the edit content
2:58
button. So as soon as you do this the
3:00
content will come. So right here you
3:02
will paste your own content right here
3:06
and click on save and everything will be
3:08
saved and this is same for every
3:10
section. So you just need to highlight
3:12
that particular section. So this will
3:14
actually is really will save you a lot
3:17
of time. So if you are looking forward
3:18
for a ReactJS project for making your
3:22
réumés and CV this will be the perfect
3:25
project and it will be a good starting
3:27
point. If you get the source code you
3:30
will exactly see how I coded this. Each
3:34
file is coded directly inside
3:36
Typescript. So you can add more features
3:39
on top of this project as well. So
3:42
the link is given in the description. So
3:45
you can easily deploy this application
3:46
as well. So we have a bunch of commands
3:49
right here. npm run build. So you will
3:51
run this command to actually deploy this
3:54
application
3:56
really easily.
3:58
Uh if you want to reset everything, you
4:00
have this button given. So it will reset
4:02
everything for you and you can actually
4:05
start it from scratch. Again you replace
4:07
the profile picture name.
4:13
So everything is customizable. So as you
4:16
see
4:24
so here you will replace the phone
4:26
number everything.
4:28
So here the website, email address,
4:30
everything. The style layout you can
4:32
even customize it is by giving margin
4:35
from the top position, bottom position
4:41
and you can even add more images as well
4:44
by clicking the image section. So right
4:47
here you can replace any other image
4:50
that you want to replace.
4:54
So you will see that that image will be
4:56
there.
4:58
So at any moment of time let's suppose
5:00
in this section you want to replace a
5:02
image again you click this widget of
5:04
image and directly you can embed
5:07
multiple images. So in this easy way and
5:11
then at any moment of time you want to
5:13
export that. So you click the print
5:17
button. So this will export your resume
5:19
to a PDF document. So it's an all-in-one
5:26
editor. So it doesn't have a back end.
5:28
So it is actually a static web
5:31
application which directly runs in the
5:32
browser. All the processing directly
5:34
happens in the browser. So it makes it
5:36
easy for you to customize your rumé on
5:39
the fly and edit the details
5:42
whatever you want to do this. So this
5:44
will save you a lot of time.
5:47
So if you are interested in this you can
5:49
purchase the source code. So this
5:52
directly runs this application directly
5:54
in the browser. So it's an all-in-one
5:58
resumeumé editor.
6:04
So all these widgets
6:07
you can control the properties
6:08
everything. Just highlight the widget
6:12
you can control the size, height,
6:15
the layout, margin everything you can
6:18
control.
6:23
>> [snorts]
6:29
>> You can click the view button. So this
6:30
will show you the actual réumé which
6:32
will look something and then you can
6:34
click the print button to actually
6:35
export that réumé to a PDF file.
6:41
[snorts] So it's a really easy
6:42
application. It is compatible on all
6:44
devices, mobile, desktop, tablet. So
6:47
it's completely responsive as well. So I
6:49
built it from scratch. Each file I
6:52
coded.
6:54
So each component
6:57
is coded. As you can see, it's fully
7:00
customizable. So you can add more
7:02
features. So the link is given. You can
7:05
purchase this application.