Building a Free Markdown to PDF Converter (No Sign-ups, 100% Browser-Based)

The Problem

I was constantly frustrated with existing markdown to PDF converters. Most of them:

• Required sign-ups and accounts
• Had paywalls or subscription fees
• Uploaded your files to their servers (privacy concerns)
• Had clunky interfaces
• Broke formatting on code blocks or math equations

I just wanted something simple that worked in my browser without jumping through hoops. So I decided to build my own.

What I Built

A completely free, browser-based markdown to PDF converter that runs 100% client-side. No servers, no data collection, no sign-ups required.

Try it here: https://free-markdown-to-pdf.netlify.app/

GitHub: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Key Features

• Live Preview - See your formatted content as you type
• Syntax Highlighting - Code blocks look professional with Highlight.js
• Math Equations - LaTeX math rendering using KaTeX
• Multiple Themes - Dark mode, light mode, and high contrast
• Customization - Adjust fonts, spacing, margins to your liking
• Privacy First - Everything runs in your browser, zero data collection
• No Installation - Just open the URL and start using it

Tech Stack

I kept it simple and used:

• React (loaded via CDN)
• Babel Standalone (for in-browser JSX compilation)
• Marked.js (markdown parsing)
• Highlight.js (syntax highlighting for code)
• KaTeX (LaTeX math rendering)
• Google Fonts (Fraunces, DM Sans, JetBrains Mono)

The entire thing is a single HTML file - no complex build process, no npm dependencies to install locally. Just clone and open!

How It Works

The workflow is super simple:

1. Paste your markdown content
2. See it formatted in real-time
3. Customize if needed (fonts, themes, spacing)
4. Use your browser's print function to save as PDF

Since everything runs client-side, your content never leaves your browser. I literally cannot see what you're converting even if I wanted to.

Why a Single HTML File?

I wanted this to be as accessible as possible. Anyone should be able to:

• Clone the repo and open index.html
• Host it anywhere (GitHub Pages, Netlify, their own server)
• Modify it without needing to understand webpack or build tools
• Use it offline once the page loads

Plus, it makes the code easy to read and understand for beginners.

Use Cases

I built this originally to save formatted conversations and notes, but people can use it for:

• Converting documentation
• Creating PDFs from markdown notes
• Formatting research papers
• Saving formatted conversations from AI tools
• Quick markdown previewing
• Any markdown → PDF needs

Challenges I Faced

1. Math Rendering

Getting KaTeX to work properly with various LaTeX syntax was tricky. I had to handle both inline math ($...$) and display math ($$...$$) correctly.

2. Print Styling

Making sure the PDF output looked exactly like the preview required a lot of CSS tweaking with @media print queries.

3. Theme Switching

Implementing multiple themes while maintaining consistency across all UI elements took more work than expected.

4. Code Block Formatting

Ensuring code blocks looked good in both the preview and the final PDF required careful styling.

What's Next?

I'm thinking about adding:

• Export to Word/HTML formats
• Preset templates for different document types
• Batch conversion (multiple files at once)
• More theme options
• Table of contents generation
• Custom CSS injection

What features would you find useful? Let me know in the comments!

Open Source

The project is fully open source with an MIT license. Feel free to:

• Use it for any purpose
• Fork it and make your own version
• Submit PRs for improvements
• Report bugs or request features

Links:

• 🌐 Live Demo: https://free-markdown-to-pdf.netlify.app/
• 💻 GitHub Repo: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Try It Out!

I'd love to hear your feedback. If you find it useful, give it a star on GitHub! And if you find bugs or have feature suggestions, open an issue.

Happy converting! 🚀

---

Have you built any side projects to solve your own problems? Share them in the comments!

Comments

[MaxxMini]

Love the single-HTML-file approach! I went down a similar path building a finance app that runs entirely in the browser (IndexedDB for storage, no server at all), and the "your data never leaves your machine" pitch really resonates with users.

One thing I ran into with @media print: browsers handle page breaks inside code blocks differently. Chrome splits mid-line while Firefox respects break-inside: avoid. Did you hit that? For longer markdown docs with multiple code snippets, adding break-inside: avoid on the pre wrapper plus a max-height fallback for Chrome prevents the worst cases.

Also curious about the Babel Standalone choice — any noticeable delay on first load for larger documents? I initially used CDN React too but switched to a build step when the initial parse started hitting ~800ms on mobile. Though for a converter tool the tradeoff (zero build = anyone can fork) makes total sense.

The KaTeX + print CSS combo is particularly tricky — nice work getting that consistent across themes.

[BlinkNBuild]

Hey @maxxmini, thanks for the detailed comment. This is super helpful.

Good catch on the print CSS issue with code blocks. I've been testing mostly in Chrome so I totally missed how Firefox handles it differently. The break-inside: avoid wrapper with max-height fallback sounds like exactly what I need, I'll add that this weekend.

Yeah, the Babel Standalone delay is noticeable on mobile. I went back and forth on this one. The ~800ms hit felt acceptable since the whole point was keeping it as a single file that anyone can just download and open. Which, honestly, was the main goal for me. But you're right that for anything bigger a build step makes way more sense. Might add a compiled version to the repo for people who want the performance boost.

Getting KaTeX + print CSS to play nice was the most annoying part of this project. Kept getting page breaks right in the middle of equations. Glad to hear its working well for you though!

Also, did you end up open sourcing your finance app? I'd love to take a look. Always curious how other people handle the browser-only architecture stuff.

Thanks again!