live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Next.js Markdown to PDF Editor & Viewer in Browser Using jsPDF & HTML2PDF.js in TS
Dec 10, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-markdown-to-pdf-editor-viewer-in-browser-using-jspdf-html2pdf-js-in-ts/
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:02
in this video I'll show you I built out
0:04
a NexJS markdown editor with live
0:08
preview features and also you can export
0:10
your markdown file into PDF as well. So
0:12
we are using the nextJS latest version
0:15
as you can see for this project. We are
0:17
also using React latest version as well
0:19
for let me show you the demo of this
0:22
application. We are running it locally
0:23
as you can see localhost 3000 and uh it
0:27
has all the features. First of all, you
0:29
can actually if you have a markdown
0:31
file, you can create a new markdown file
0:33
by clicking the new button and you can
0:36
paste a bunch of markdown right here. Or
0:39
if you have a file that you want to edit
0:42
as well, you can drag and drop that
0:43
markdown file
0:46
by simply clicking on this and right
0:49
here bringing your markdown file.
0:54
So once you bring it simply click import
0:57
this and simply click import. So all the
1:00
content inside that markdown file will
1:02
be imported and you will get this
1:03
notification.
1:05
It shows you clearly how many words are
1:07
there inside the markdown file. How many
1:10
characters how many lines it shows you
1:13
the live preview on the right hand side.
1:15
If you make any sort of changes it will
1:17
be
1:19
reflected back as you can see.
1:22
Then we have this button here of uh
1:24
download. So you also have the option to
1:28
export everything
1:33
to a new markdown file after making
1:35
those changes. And then we also have the
1:37
button for exporting this markdown into
1:39
PDF. So once you click this button, it
1:41
will generate a PDF file for you
1:44
instantly
1:45
and automatically that PDF file will be
1:48
downloaded. So all the processing is
1:50
directly happening it inside the
1:52
browser.
1:54
So you can edit your markdown files,
1:57
export them into PDF.
2:00
So it has a live preview.
2:04
So it's coded inside directly.
2:07
So once the processing completes your
2:10
PDF file will be downloaded as you can
2:12
see into multiple pages. All the images
2:17
have been successfully inserted. So this
2:19
is a fullyfledged project. If you're
2:21
interested in purchasing it, the link is
2:24
given in the description. So once you
2:26
purchase it, automatically all the code
2:28
will be downloaded from Google Drive. So
2:31
every component as you can see it's
2:33
divided into its appropriate TypeScript
2:35
file here. So once you make any sort of
2:38
changes, it will be reflected back. So
2:41
we are using quite a number of third
2:42
party libraries for this. First of all,
2:44
we are using markdown it, JSPDF, HTML to
2:48
PDF, HTML to canvas, HTML to PDF. These
2:52
are all PDF processing libraries and
2:54
markdown processing libraries.
2:57
So, it's a fullyfledged project. We are
2:59
also using some Tailwind as well. So,
3:03
if you want to modify the source code or
3:06
add additional features. So, once you
3:08
get the source code, you can easily do
3:10
that. And we are running it on local
3:12
host. As you can see,
3:16
if you want to create a new file, new
3:18
markdown file, you click the new file
3:20
button and then that editor will open.
3:24
So you paste your markdown file
3:27
automatically the live preview you will
3:29
able to see. So in this easy way you can
3:32
easily create your markdown file with a
3:34
fully fleshed editor. with live preview.
3:37
All the changes you will be able to see
3:39
on the right hand side. You can export
3:42
them into PDF as well. You can save your
3:44
work by clicking the save button.
3:51
So this is a full screen mode as well
3:53
also available. This is a split view.
3:55
This is a preview. This is a fully this
3:59
is the editor mode.
4:03
And this is a split mode. So this is the
4:06
fullyfledged markdown editor directly in
4:08
the browser. I coded this in next years
4:11
if you are interested in this guys. The
4:13
link is given in the description for the
4:15
full source code.
4:18
So it will be easy for you to run this
4:20
locally or also you can easily deploy
4:22
this if you purchase a domain name. You
4:24
can easily deploy this offline markdown
4:27
editor. It doesn't require internet.
4:30
Once it is deployed, it will be a static
4:33
web application, static markdown editor.
4:36
So I showed you all the features guys.
4:38
If you are interested, the link is given
4:40
in the description.
#Programming