The latest articles on DEV Community by jom hou (@jom_hou_f89f9d6df6d688c0a). https://dev.to/jom_hou_f89f9d6df6d688c0a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4070760%2F7ded75fc-5f1a-43ee-9599-bb3f74422696.png https://dev.to/jom_hou_f89f9d6df6d688c0a en jom hou Mon, 10 Aug 2026 12:18:53 +0000 https://dev.to/jom_hou_f89f9d6df6d688c0a/how-i-built-a-markdown-to-pdf-export-tool-with-nextjs-and-what-i-learned-25gl https://dev.to/jom_hou_f89f9d6df6d688c0a/how-i-built-a-markdown-to-pdf-export-tool-with-nextjs-and-what-i-learned-25gl <h1> How I built a Markdown-to-PDF export tool with Next.js (and what I learned) </h1> <p>I've been building side projects for a while, but <strong>Markdownary</strong> is the first one I actually shipped and put in front of real users.</p> <p>The core feature sounds simple: write Markdown, export to PDF. But getting it to work <em>well</em> turned out to be surprisingly tricky.</p> <h2> The problem with browser-based PDF export </h2> <p>Most Markdown-to-PDF tools use one of two approaches:</p> <ol> <li> <strong><code>window.print()</code></strong> — quick and dirty, but the output looks like a printed webpage</li> <li> <strong>Puppeteer/headless Chrome</strong> — accurate, but heavy, slow to cold-start, and expensive to host</li> </ol> <p>I wanted something that produced clean, typographically correct PDFs without spinning up a full browser instance on every request.</p> <h2> The solution: server-side rendering with a Skia-based engine </h2> <p>I ended up using a server-side Markdown rendering engine built on <strong>Skia Canvas</strong> — the same graphics library that powers Chrome's rendering. It processes Markdown on the server and produces vector-quality output without needing a headless browser.</p> <p>The result: PDFs that look like they were designed, not printed.</p> <h2> Tech stack </h2> <ul> <li> <strong>Next.js 15</strong> (App Router) — API routes handle all export logic server-side</li> <li> <strong>TypeScript</strong> throughout</li> <li> <strong>Tailwind CSS 4</strong> for the editor UI</li> <li> <strong>react-markdown + remark-gfm</strong> for live preview</li> <li> <strong>PM2 cluster mode</strong> for production deployment</li> </ul> <h2> What the app does </h2> <p><strong>Markdownary</strong> is a clean, distraction-free Markdown editor with:</p> <ul> <li>Export to <strong>PDF, Word (.docx), PNG, and HTML</strong> </li> <li> <strong>6 themes</strong> with live preview (light, dark, warm, bamboo, ocean, rose)</li> <li> <strong>No login required</strong> — open and start writing</li> <li>Import <code>.md</code>, <code>.docx</code>, <code>.txt</code> files</li> <li>Synchronized scroll between editor and preview</li> <li>Mobile-friendly toolbar</li> </ul> <h2> Lessons learned </h2> <p><strong>1. PDF quality is a UX differentiator</strong></p> <p>Users notice immediately when PDF output looks bad. Investing in a proper rendering engine made the biggest difference in early feedback.</p> <p><strong>2. "No login" is a feature</strong></p> <p>Removing the signup wall increased the conversion from "landing page visitor" to "actual user" dramatically. People just want to try it.</p> <p><strong>3. Character limits matter</strong></p> <p>Without a content size limit on the export API, a single large document can spike memory usage and affect all users. I added a 300k character cap with a clear error message.</p> <p><strong>4. Mobile is non-negotiable</strong></p> <p>Even for a "desktop" tool like a Markdown editor, ~30% of initial visits came from mobile. A collapsed toolbar with the most-used actions (bold, italic, heading, list) surfaced made a huge difference.</p> <h2> What's next </h2> <ul> <li>Google AdSense integration (currently in review)</li> <li>More export themes</li> <li>Collaborative editing (maybe)</li> </ul> <p>If you're into Markdown, writing tools, or just want to try it out:</p> <p>👉 <strong><a href="https://markdownary.com" rel="noopener noreferrer">https://markdownary.com</a></strong></p> <p>Would love feedback — especially on the PDF output quality and anything that feels broken on mobile.</p> webdev nextjs markdown showdev