Technical Specification: Browser-Based Markdown to PDF Converter

Overview

A high-performance, client-side utility that transforms Markdown syntax into professionally formatted PDF documents. The tool operates entirely within the user's browser, ensuring absolute privacy and zero-latency generation.

Core Features

• Real-Time Split-View Editor: Left pane for Markdown input, right pane for live HTML preview.
• Instant PDF Generation: Uses html2pdf.js (built on html2canvas and jspdf) to capture the rendered preview and generate a downloadable PDF.
• Customizable Export Settings: Toggle between A4/Letter sizing and adjustable page margins via a settings modal.
• Zero-Server Architecture: No backend, no cookies, no storage. All processing occurs in browser memory.
• Responsive Interface: Adaptive layout that switches from split-screen to vertical stack on mobile devices.

Technical Implementation

• Core Framework: Vanilla JavaScript (ES6+), HTML5, Tailwind CSS for styling.
• Markdown Parsing: marked.js library for fast parsing of markdown to HTML.
• PDF Generation: html2pdf.js for handling the conversion of DOM elements to PDF blobs.
• Architecture Constraints:
  • All state (input content, settings) must be handled in-memory using JavaScript objects.
  • DO NOT use localStorage or sessionStorage.
  • All library dependencies must be sourced from high-availability CDNs (e.g., cdnjs or unpkg).

UI/UX Design

• Aesthetic: Clean, minimalist "SaaS" design. Soft shadows, rounded corners (large), and generous white space.
• Palette:
  • Background: #F9FAFB (Cool Gray 50)
  • Primary Accent: #2563EB (Blue 600)
  • Text: #1F2937 (Gray 800)
  • Editor Background: #FFFFFF
• Animations:
  • Sidebar/Toolbar transitions must be hardware-accelerated (transform / opacity).
  • Smooth hover states on all interactive elements (buttons, inputs).

User Flow

1. Landing: User opens the page to a clean editor view.
2. Input: User pastes or types markdown in the editor window.
3. Preview: The application renders the markdown into a live preview window immediately.
4. Configuration (Optional): User opens the settings modal to adjust PDF margins or paper size.
5. Output: User clicks "Export to PDF." A custom loader shows progress, and the browser native save-dialog initiates the download.

Critical Directives for Developer

• No Branding: Ensure no fictional brand names appear anywhere. Use functional, descriptive headers like "Markdown Editor" and "PDF Export."
• No Popups: Do not use alert(), prompt(), or confirm(). All feedback, including "Download Complete" notifications, must use non-blocking UI toasts or custom modals.
• Single File: All CSS, HTML, and JS must be inside one <main>.html file. CSS/JS should be in <style> and <script> tags, respectively.
• No External Links: If external links are necessary (e.g., to library documentation), they MUST include target="_blank" rel="noopener noreferrer".
• Iframe Compatibility: The app is running in a sandbox. Avoid all features restricted by null origin (cookies, local storage, etc).