Guide

How to Convert Markdown to PDF in React

Updated July 15, 2026

Building text editors or documentation dashboards is a common task in modern web development. When working with React, developers often need to render Markdown text and allow users to export the formatted results. Learning how to convert markdown to pdf react systems support lets you implement clean download features directly in your web applications.

Depending on your product requirements, you can handle PDF generation client-side using the browser print engine, or server-side using a headless browser. Below is a guide to both approaches.

Option 1: Client-Side Conversion (Easiest)

For client-side rendering, the most efficient path is to convert Markdown to HTML using a React parser and then trigger the browser’s print engine. This is the exact philosophy behind tools like MarkdownToFile.com.

First, install react-markdown to parse the text:

npm install react-markdown

Next, construct a simple component that renders the parsed content and uses window.print() to output the PDF:

import React, { useRef } from 'react';
import ReactMarkdown from 'react-markdown';

export default function DocumentPrinter({ markdownContent }) {
  const printRef = useRef();

  const handlePrint = () => {
    window.print();
  };

  return (
    <div>
      <button onClick={handlePrint} className="btn-print">
        Download PDF
      </button>
      <div ref={printRef} className="print-area">
        <ReactMarkdown>{markdownContent}</ReactMarkdown>
      </div>
    </div>
  );
}

Formatting the Output with CSS

To make the printed page look clean, you must use @media print rules in your global stylesheet to hide interface chrome (like the print button) and format layout margins:

@media print {
  /* Hide buttons and sidebar */
  button, nav, footer {
    display: none !important;
  }

  /* Reset body styles for print */
  body {
    background: white;
    color: black;
    margin: 0;
    padding: 0;
  }

  /* Force page break rules */
  h1, h2 {
    page-break-after: avoid;
  }
  
  pre, table {
    page-break-inside: avoid;
  }
}

This client-side method is fast, cost-free, and respects user privacy since the data never leaves the browser. However, layout consistency depends entirely on the user’s web browser print engine.

Option 2: Server-Side PDF Generation (Most Consistent)

If you need pixel-perfect, consistent PDFs for official reports or invoices, client-side rendering can be unreliable. In these cases, generating the PDF on a Node.js backend using Puppeteer is the industry standard.

First, install the markdown compiler and Puppeteer on your server:

npm install marked puppeteer

Create an API endpoint that handles the conversion:

import puppeteer from 'puppeteer';
import { marked } from 'marked';

export async function generatePdf(markdownText) {
  // 1. Compile Markdown to HTML
  const htmlContent = marked.parse(markdownText);
  const fullHtml = `
    <html>
      <head>
        <style>
          body { font-family: sans-serif; padding: 40px; line-height: 1.6; }
          pre { background: #f4f4f4; padding: 10px; border-radius: 5px; }
          table { width: 100%; border-collapse: collapse; }
          th, td { border: 1px solid #ddd; padding: 8px; }
        </style>
      </head>
      <body>${htmlContent}</body>
    </html>
  `;

  // 2. Launch Puppeteer and render PDF
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(fullHtml, { waitUntil: 'networkidle0' });
  
  const pdfBuffer = await page.pdf({
    format: 'A4',
    margin: { top: '20mm', bottom: '20mm', left: '20mm', right: '20mm' }
  });

  await browser.close();
  return pdfBuffer;
}

This method guarantees that every user receives an identical PDF, regardless of their device. The downside is that hosting Puppeteer is resource-heavy and requires running a live Node.js server.

Side-by-Side Comparison

FeatureClient-Side (window.print)Server-Side (Puppeteer)
Server CostFreeHigh
Privacy100% local, no uploadData sent to server
Styling ControlModerate (CSS Print)High (Full headless Chrome)
Offline SupportYesNo
Best ForNotes, diaries, web toolsInvoices, official certificates

Bottom Line

If you are building internal developer tools, private notebook features, or simple blog-to-pdf options, client-side conversion using React components is the best and cheapest route. If you are issuing official documents where page alignments must be rigid, invest in server-side Puppeteer compilation.

If you need to quickly test how your Markdown files format into PDF layouts without writing code, use our free online editor to adjust page margins and download clean PDFs in seconds.

Written by Markdown to PDF Editorial Team

Our team specializes in document design, web standards, and developer utilities. This guide was researched and vetted against current browser printing standards and Paged.js specifications. Learn more on our About page.

Try it yourself — free, no signup

Convert your Markdown to a polished PDF right in your browser.

Open the editor

Related reading

← All articles