--- title: 'Build a Next.js Markdown to PDF Editor & Viewer in Browser Using jsPDF & HTML2PDF.js in TypeScript' source: 'https://youtube.com/watch?v=Z18Jt08XUoU' video_id: 'Z18Jt08XUoU' date: 2026-07-28 duration_sec: 283 --- # Build a Next.js Markdown to PDF Editor & Viewer in Browser Using jsPDF & HTML2PDF.js in TypeScript > Source: [Build a Next.js Markdown to PDF Editor & Viewer in Browser Using jsPDF & HTML2PDF.js in TypeScript](https://youtube.com/watch?v=Z18Jt08XUoU) ## Summary This video demonstrates a Next.js markdown editor with live preview and PDF export functionality. The presenter showcases features like drag-and-drop file import, word/character count, and various view modes, then promotes the paid source code available for purchase. ### Key Points - **Project Overview** [00:02] — Building a Next.js markdown editor with live preview and PDF export using Next.js and React latest versions. - **File Creation and Import** [00:31] — Users can create new markdown files or drag-and-drop existing files to import content. - **Live Statistics** [01:02] — Editor shows word count, character count, and line count that update in real time. - **Live Preview and Export** [01:17] — Preview updates live on the right side; download button for markdown file and PDF export using client-side processing. - **Technologies Used** [02:43] — Third-party libraries: markdown-it, jsPDF, html2pdf.js, html2canvas for PDF processing and markdown processing. Also uses Tailwind CSS. - **Modification and Deployment** [03:08] — Source code is available for purchase; can be modified and deployed as a static web app without internet after deployment. - **View Modes** [03:51] — Supports full screen, split view, preview-only, and editor-only modes. ### Conclusion The video primarily serves as a promotional demo for a paid Next.js markdown editor with live preview and PDF export, rather than a step-by-step build tutorial. ## Transcript in this video I'll show you I built out a NexJS markdown editor with live preview features and also you can export your markdown file into PDF as well. So we are using the nextJS latest version as you can see for this project. We are also using React latest version as well for let me show you the demo of this application. We are running it locally as you can see localhost 3000 and uh it has all the features. First of all, you can actually if you have a markdown file, you can create a new markdown file by clicking the new button and you can paste a bunch of markdown right here. [snorts] Or if you have a file that you want to edit as well, you can drag and drop that markdown file by simply clicking on this and right here bringing your markdown file. this and simply click import. So all the content inside that markdown file will notification. It shows you clearly how many words are there inside the markdown file. How many characters how many lines it shows you the live preview on the right hand side. If you make any sort of changes it will be reflected back as you can see. Then we have this button here of uh download. So you also have the option to download. So you also have the option to export everything those changes. And then we also have the button for exporting this markdown into PDF. So once you click this button, it will generate a PDF file for you instantly and automatically that PDF file will be downloaded. So all the processing is directly happening it inside the browser. So you can edit your markdown files, export them into PDF. So it has a live preview. So it's coded inside directly. So once the processing completes your PDF file will be downloaded as you can see into multiple pages. All the images have been successfully inserted. So this is a fullyfledged project. If you're interested in purchasing it, the link is given in the description. So once you purchase it, automatically all the code will be downloaded from Google Drive. [snorts] So every component as you can see it's divided into its appropriate TypeScript file here. [snorts] So once you make any sort of changes, it will be reflected back. So we are using quite a number of third party libraries for this. First of all, we are using markdown it JSPDF, HTML to PDF, HTML to canvas, HTML to PDF. These are all PDF processing libraries and markdown processing libraries. So, it's a fullyfledged project. We are So, it's a fullyfledged project. We are also using some Tailwind as well. So, if you want to modify the source code or add additional features. So, once you get the source code, you can easily do that. and we are running it on local that. and we are running it on local host as you can see. markdown file, you click the new file button and then that editor will open. So you paste your markdown file automatically the live preview you will able to see. So in this easy way you can easily create your markdown file with a fully fleshed editor with live preview. All the changes you will be able to see on the right hand side. You can export them into PDF as well. You can save your them into PDF as well. You can save your work by clicking the save button. So this is a full screen mode as well also available. This is a split view. also available. This is a split view. This is a preview. This is a fully this This is a preview. This is a fully this is the editor mode and this is a split mode. So this is the fully fledged markdown editor directly in the browser. I coded this in next years. If you are interested in this guys the link is given in the description for the full source code. [snorts] So it will be easy for you to run this locally or also you can easily deploy this if you purchase a domain name you can easily deploy this offline markdown editor it doesn't require internet once it is deployed it will be a static web application static markdown editor so I showed you all the features guys if you are interested the link is given in the description