Up next in 10
Build a Next.js Markdown Viewer & Editor in Browser to Export MD to HTML & PDF in TypeScript
Mar 13, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-markdown-viewer-editor-in-browser-to-export-md-to-html-pdf-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys uh welcome to this video.
0:02
So in this video I'll show you I
0:04
basically built out a nextjs project
0:08
which allows you to actually edit your
0:11
markdown files directly in the browser
0:13
and view them. So I'm running this
0:15
application on local host here. It's a
0:18
nextjs application. It's a markdown
0:20
editor which you can export your
0:22
markdown into html and pdf as well. So
0:25
simply you will paste your markdown
0:27
inside this text field. I already pasted
0:30
it. So once you refresh it, it will look
0:33
something like this. So here inside the
0:35
left hand side corner of the screen, you
0:37
will paste your markdown. And on the
0:39
right hand side corner, you can easily
0:41
read your markdown. On the right hand
0:43
side corner, you will see the this will
0:45
be live preview which will be shown. All
0:48
these elements are there. Tables, source
0:51
code, snippets, everything. So here you
0:53
simply need to paste the markdown. After
0:56
that we have two options. We have two
0:58
buttons here. We can export your
1:00
markdown into HTML. You simply click
1:02
this button. So everything will be
1:04
exported to HTML file. So it
1:08
automatically uh converted your markdown
1:10
into HTML. And also we have a second
1:12
button to export your markdown into PDF.
1:15
So once you click it all the processing
1:18
will directly happen in the browser. And
1:20
this nextjs application will convert
1:22
your markdown into PDF.
1:25
So you can just see here.
1:28
So it's a fullyfledged project. If you
1:30
basically want the source code, just go
1:32
to the description link and from that
1:34
you can directly purchase the full
1:36
source code. So I have given the link
1:41
automatically from Google drive. All the
1:43
source code will be uh downloaded once
1:46
the payment is done. So the link is
1:48
given in the description. So all the
1:50
components are divided into its
1:52
appropriate TypeScript file here. As you
1:54
can see the whole application is divided
1:57
into multiple Typescript files here.
2:02
So I have given the link. It's very easy
2:05
to run. Simply you will go to the
2:07
command line and just type npm rundev.
2:10
So here you can easily locally run this
2:13
application and also deploy this
2:14
application as well. So this is a fully
2:16
fledged application which directly runs
2:18
in the browser. I have given the link.
2:20
You can directly purchase it. So simply
2:22
you will paste the markdown and the
2:24
right hand corner of the screen you will
2:26
see the live preview and you can export
2:28
as HTML or PDF as well. So it's a nextJS
2:33
application. If I show you the package
2:34
doJSON file for this we are using quite
2:37
a number of dependencies. We are using
2:39
React markdown. We are also using uh
2:45
the latest React framework motion as
2:48
well. We are using next the latest
2:50
version framework react 18. So [sighs]
2:55
we are using the latest versions for
2:57
building this. So it's very simple. So
3:00
once you get the source code you will
3:02
able to add additional features and add
3:06
and modify the code as well. So I've
3:08
given the link you can directly purchase
3:11
it. It's a single page application which
3:13
is the markdown editor which directly
3:15
runs in the browser instant live preview
3:18
in real time and also we get a option to
3:21
export your markdown to HTML or PDF. So
3:25
definitely check out I've given the link
3:27
in the description.