Markdown to PDF Converter

A modern web-based application that converts Markdown documents to beautifully formatted PDFs with live preview. Built with React, Vite, and @react-pdf/renderer for high-quality native PDF generation.

Features

✨ Live Preview - See your markdown rendered in real-time as you type
📝 Rich Markdown Support - Headers, lists, tables, code blocks, blockquotes, and more
🎨 Beautiful PDFs - Native PDF generation with crisp text at any zoom level
💾 Auto-Save - Your work is automatically saved to browser storage
🚀 Fast & Responsive - Optimized for performance
☁️ Serverless - No backend required, PDF generation happens entirely in the browser
🔍 Searchable PDFs - Generated PDFs have real text, not images

Screenshots

Split-pane interface with live markdown editor on the left and rendered preview on the right.

Tech Stack

• React 18 - UI framework
• Vite - Build tool
• @react-pdf/renderer - Native PDF generation (vector text, not screenshots)
• markdown-it - Markdown parser
• DOMPurify - XSS protection
• Prism.js - Syntax highlighting for preview

🌐 Live Demo

Try it now: markdown-2-pdf.com

Quick Start

Prerequisites

• Node.js 18 or higher
• npm

Installation

1. Clone the repository

git clone https://github.com/LapchienSun/Markdown-To-PDF.git
cd markdown-to-pdf

2. Install dependencies

npm install

3. Run the application

npm run dev

4. Open your browser

• Navigate to http://localhost:3000
• Start writing markdown and see it rendered in real-time
• Click "Export as PDF" to generate a PDF

Deploy to Vercel

This project is optimized for Vercel deployment:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Vercel will auto-detect the settings from vercel.json
4. Deploy!

Or use the Vercel CLI:

npx vercel

Project Structure

markdown-to-pdf/
├── packages/
│   └── web/                        # React frontend
│       ├── src/
│       │   ├── components/         # React components
│       │   │   ├── Editor.jsx      # Markdown editor
│       │   │   ├── Preview.jsx     # Live preview
│       │   │   ├── Toolbar.jsx     # Top toolbar with PDF export
│       │   │   ├── ResizablePanes.jsx
│       │   │   └── Notification.jsx
│       │   ├── hooks/              # Custom React hooks
│       │   │   ├── useMarkdown.js
│       │   │   └── useLocalStorage.js
│       │   ├── styles/             # CSS files
│       │   ├── utils/
│       │   │   ├── markdownParser.js   # HTML preview parser
│       │   │   └── pdfRenderer.jsx     # Markdown to PDF components
│       │   ├── App.jsx
│       │   └── main.jsx
│       ├── package.json
│       └── vite.config.js
│
├── package.json                    # Monorepo root with workspaces
├── vercel.json                     # Vercel deployment config
└── README.md

Supported Markdown Features

Feature	Preview	PDF
Headers (H1-H6)	✅	✅
Bold, Italic, Strikethrough	✅	✅
Ordered and Unordered Lists	✅	✅
Nested Lists	✅	✅
Code Blocks	✅	✅
Inline Code	✅	✅
Tables	✅	✅
Blockquotes	✅	✅
Horizontal Rules	✅	✅
Links	✅	✅
Images	✅	✅
Task Lists	✅	✅

Development

Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Monorepo Structure

This project uses npm workspaces. The web application lives in packages/web/.

To add new packages to the monorepo, create a new folder in packages/ with its own package.json.

How PDF Generation Works

Unlike screenshot-based PDF generators, this app uses @react-pdf/renderer which:

1. Parses your markdown into tokens using markdown-it
2. Converts tokens to React PDF components (<Text>, <View>, <Link>, etc.)
3. Generates a native PDF with real vector text

Benefits:

• 📄 Crisp text at any zoom level
• 🔍 Text is searchable and selectable
• 📦 Smaller file sizes
• 🎯 Consistent rendering across devices

Security

• HTML sanitization with DOMPurify (for preview)
• All processing happens client-side (no data sent to servers)
• No cookies or tracking
• Your documents never leave your browser

Performance

Expected Performance:

• Preview rendering: <100ms
• PDF generation: 1-3 seconds (depends on document size)
• No cold starts (fully client-side)

Document Size Limits:

• Recommended max: ~50 pages
• Larger documents may slow down PDF generation

Contributing

Contributions are welcome! Please read our Contributing Guide and Code of Conduct before submitting pull requests.

Quick steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

See detailed guidelines in CONTRIBUTING.md.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• @react-pdf/renderer - Native PDF generation for React
• markdown-it - Markdown parser
• Prism.js - Syntax highlighting
• DOMPurify - XSS sanitization

---

Support

• 🐛 Report Bugs
• 💡 Request Features
• ❓ Ask Questions

---

Made with ❤️ by Chris Carswell