Markdown Editor

A powerful Markdown editor with real-time preview, HTML export, and direct PDF export functionality. Convert your Markdown content to professional PDF documents with a single click.

Features

• Real-time Preview: Input Markdown content and see formatted results in real-time
• HTML Export: Export content as formatted HTML file
• PDF Export: Direct PDF export with professional formatting and styling
• Syntax Highlighting: Support for code block syntax highlighting
• Table Support: Support for GitHub Flavored Markdown tables
• Responsive Design: Adapts to various screen sizes
• Dark Mode: Support for dark and light theme switching

Tech Stack

• Frontend Framework: Next.js 15
• UI Component Library: HeroUI
• Styling: Tailwind CSS
• Markdown Rendering: react-markdown + remark-gfm
• PDF Export: puppeteer-core + Browserless.io
• Export: Native browser APIs
• Type Safety: TypeScript

Quick Start

Install Dependencies

pnpm install

Start Development Server

pnpm dev

The application will start at http://localhost:3000.

🌐 Website: https://markdown2pdf.xyz

Build for Production

pnpm build
pnpm start

Usage

1. Edit Markdown: Input Markdown content in the left editor
2. Real-time Preview: View formatted results on the right
3. Export Options:
   • Click "Export as HTML" to download content as formatted HTML file
   • Click "Export as PDF" to download content as professional PDF document

Export to PDF

This editor provides direct PDF export functionality using puppeteer-core connected to Browserless.io. The PDF generation happens on the server-side, ensuring consistent and high-quality output.

Server-side PDF Generation

The application uses:

• puppeteer-core: For browser automation
• Browserless.io: Cloud-based Chrome browser service
• Server-side rendering: Ensures consistent PDF output across all devices

PDF Features

• Professional Formatting: Clean, readable typography
• Code Syntax Highlighting: Properly formatted code blocks
• Table Support: Well-formatted tables with borders
• Page Breaks: Automatic page breaks for long content
• Print-optimized: Optimized for PDF output

Alternative Export Methods

If you prefer client-side PDF generation, you can also:

1. Export HTML: Click "Export as HTML" button to download the HTML file
2. Browser Print: Open the HTML file and use browser's print-to-PDF functionality
3. Online Converters: Use services like CloudConvert, ILovePDF, etc.

Supported Markdown Syntax

• Headers (H1-H6)
• Bold, Italic
• Code blocks and inline code
• Lists (ordered and unordered)
• Links and images
• Tables
• Blockquotes
• Horizontal rules
• Task lists
• Strikethrough

Project Structure

markdown-to-pdf/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Main page
│   └── ...
├── components/            # React components
│   ├── html-export.tsx    # HTML export component
│   ├── logo.tsx           # Logo component
│   └── primitives.ts      # Style primitives
├── config/               # Configuration files
├── styles/               # Style files
└── public/               # Static assets

Development

Code Standards

The project uses ESLint and Prettier for code formatting:

pnpm lint

Type Checking

pnpm type-check

Performance Monitoring

For production deployments, consider adding:

• Vercel Analytics: Monitor real user performance
• Error Tracking: Add Sentry or similar for error monitoring
• Performance Budgets: Set up bundle size limits in CI/CD

License

MIT License