Up next in 10
Build a Next.js Canva Job Resume & CV PDF Editor Full Stack App in Browser Using Node.js & TS
Feb 26, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-job-resume-cv-pdf-editor-full-stack-app-in-browser-using-node-js-ts/
Show More Show Less View Video Transcript
0:00
Uh hello guys in this video I'll show
0:02
you I built out a full stack rumé and uh
0:07
CV PDF editor directly in browser. So if
0:10
you're looking forward forward for
0:12
creating a job rum or CV. So this is an
0:16
all-in-one fullstack
0:19
editor built in nextJS and NodeJS. So we
0:22
are you running it on localhost 3000. So
0:25
the interface looks something like this.
0:27
So it's already having this resumeum.
0:29
You can edit this by clicking the pencil
0:32
icon. It has all the features. If you
0:35
want to export this to a PDF file, you
0:37
click the download button. So, it will
0:39
export this to a actual full réumé which
0:44
contains multiple pages, six pages. So,
0:47
you can actually edit all these details
0:49
such as the profile picture, name of the
0:52
person,
0:53
email address, website, phone number,
0:55
everything. You can customize it by just
0:57
clicking the pencil icon to activate the
1:00
edit mode. So now you can actually edit
1:02
all these details by your own details.
1:09
You can change the photograph
1:10
everything. You can replace it very
1:13
easily. So this will save you a lot of
1:15
time. You can change the location,
1:18
phone number like this. Just need to
1:21
highlight the portion that you want to
1:22
change. And
1:25
so this is your about section. You can
1:27
customize it, replace it with your own
1:29
details. So this project I actually
1:33
coded directly from scratch in NodeJS
1:36
and Next.js. So it's a all-in-one full
1:38
stack application. All the components I
1:40
written it from scratch. So this is
1:42
actually the full directory structure of
1:44
the project here. So each component is
1:46
customizable. So it's coded directly
1:48
inside Typescript. So once you get the
1:51
source code, the link is given, you can
1:53
directly purchase the source code. So
1:55
once you purchase it, automatically the
1:58
source code will be downloaded from
1:59
Google Drive. So it's easy for you to
2:02
customize everything. So I coded this
2:06
from scratch. So it's a fullstack
2:08
application.
2:09
So if I show you the package.json file,
2:12
we are actually using node as well. And
2:15
we are also using
2:18
NextJS the latest version of NextJS. So
2:21
this is the actual app here inside
2:28
so
2:30
right here. So this is the actual front
2:34
end of the application. So if you see we
2:36
are using Daisy UI for the user
2:38
interface.
2:40
HTML to canvas HTML to image. So these
2:43
are the two libraries that we are using
2:44
for actually exporting the rumé to PDF
2:49
and as you can see we are using React
2:52
latest version 19. Uh next
2:55
so we are simply running this locally as
2:57
you can see npm run webdev. So it's easy
3:00
for you to deploy this application as
3:02
well.
3:05
So everything is customizable. You just
3:08
need to highlight the edit mode, click
3:11
the pencil icon, change the details,
3:13
everything.
3:15
So if you drag down,
3:20
so just need to click it using your
3:22
mouse and then it's fully customizable.
3:25
You can also go to a particular section
3:28
right here. This is the project section.
3:30
And you can add your just edit these
3:33
details
3:36
by changing the title of the project,
3:38
the URL, description,
3:41
the technologies which are used.
3:45
You can also click the remove button. If
3:46
you don't want this, you click the
3:48
remove button. That project will be
3:50
removed. You can add your own project by
3:52
clicking this button. So just providing
3:55
a title, link, description, everything.
3:59
So it's fully customizable. Uh same goes
4:02
with the categories as well this
4:05
contributions
4:08
and then you can click the print button
4:09
as well to directly print the rum by
4:12
clicking the print button.
4:15
You can even export this to a SVG file
4:18
as well by clicking the export SVG
4:21
button.
4:36
So these are languages section. You can
4:38
add more languages as well.
4:45
So we using radics UI as well. So
4:50
can easily build out the project as
4:52
well. So once you're happy npm run
4:54
build. So this will build out the
4:56
project. So essentially this is once you
4:59
make the changes you can switch to view
5:02
mode. So it will look something like
5:04
this. After you make the changes
5:10
so again you want to make changes you
5:12
click the pencil icon. So this will
5:14
change to edit mode. So directly you can
5:17
edit the details and make your own rum.
5:21
And after that save this. So it will
5:24
look something like this.
5:36
You can also export this as PNG, JPG,
5:39
SVG, everything.
5:41
You can even download the CV as PDF as
5:44
well. So it's an all-in-one full stack
5:47
Canva clone PDF rumé and CV builder
5:51
editor. So it also looks compatible on
5:55
all the devices mobile, desktop, tablet.
5:58
So it's fully customizable as well. So
6:02
if you're looking forward for building
6:04
that editor, it will save you a lot of
6:06
time as well. You don't need to build it
6:09
from scratch. Instead, you can purchase
6:11
the source code and add additional
6:14
features as well on top of this project.
6:18
So
6:21
each section as you can see it's
6:23
customizable. So
6:26
so once it exported it will download
6:29
this PDF file and
6:33
you can build out a professional looking
6:35
rumé and CV in a matter of minutes by
6:38
using this application.
6:41
Here you replace your LinkedIn URL,
6:43
profile picture, name, address, prof,
6:46
email address, location, everything.