Basic Usage

Overview

The core workflow is:

1. Create a jsPDF document instance
2. Define a RenderOption object specifying layout, fonts, and behavior
3. Call MdTextRender(doc, markdown, options) — it renders the markdown into the PDF
4. Save or output the PDF

Step-by-Step

1. Create a jsPDF Document

import { jsPDF } from 'jspdf'

const doc = new jsPDF({
  unit: 'mm',
  format: 'a4',
  orientation: 'portrait',
})

2. Define Options

import type { RenderOption } from 'jspdf-md-renderer'

const options: RenderOption = {
  // Starting position for rendering
  cursor: { x: 10, y: 10 },

  // Page layout
  page: {
    format: 'a4',
    orientation: 'portrait',
    maxContentWidth: 190,    // A4 width (210) minus margins
    maxContentHeight: 277,   // A4 height (297) minus margins
    lineSpace: 1.5,
    defaultLineHeightFactor: 1.2,
    defaultFontSize: 12,
    defaultTitleFontSize: 14,
    topmargin: 10,
    xpading: 10,
    xmargin: 10,
    indent: 10,
  },

  // Font configuration
  font: {
    bold: { name: 'helvetica', style: 'bold' },
    regular: { name: 'helvetica', style: 'normal' },
    light: { name: 'helvetica', style: 'light' },
  },

  // Callback: get final Y position after rendering
  endCursorYHandler: (y) => {
    console.log('Content ended at Y:', y)
  },
}

3. Render Markdown

import { MdTextRender } from 'jspdf-md-renderer'

const markdown = `
# Project Report

## Summary

This report covers the **Q4 results** with detailed analysis.

- Revenue: *$1.2M*
- Growth: **+15%**
- New customers: 340
`

await MdTextRender(doc, markdown, options)

4. Save the PDF

doc.save('report.pdf')

Using endCursorYHandler

The endCursorYHandler callback provides the final Y cursor position after all markdown content has been rendered. This is essential for appending additional content after the markdown:

let endY = 0

await MdTextRender(doc, markdown, {
  ...options,
  endCursorYHandler: (y) => {
    endY = y
  },
})

// Now add content below the rendered markdown
doc.setFontSize(10)
doc.setTextColor(100, 100, 100)
doc.text('Generated by jspdf-md-renderer', 10, endY + 10)

Using pageBreakHandler

The pageBreakHandler callback fires every time a new page is added during rendering. Use it to add headers, footers, or watermarks to each page:

await MdTextRender(doc, longMarkdown, {
  ...options,
  pageBreakHandler: (doc) => {
    const pageWidth = doc.internal.pageSize.getWidth()
    doc.setFontSize(8)
    doc.setTextColor(150)
    doc.text('Confidential', pageWidth / 2, 5, { align: 'center' })
  },
})

Optional Configuration

These optional sections can be added to the options object:

const options: RenderOption = {
  // ...required fields above...

  // Text alignment for paragraphs
  content: {
    textAlignment: 'justify', // 'left' | 'right' | 'center' | 'justify'
  },

  // Inline code styling
  codespan: {
    backgroundColor: '#EEEEEE',
    padding: 0.5,
    showBackground: true,
    fontSizeScale: 0.9,
  },

  // Link color (RGB tuple)
  link: {
    linkColor: [0, 0, 255],
  },

  // Default image alignment
  image: {
    defaultAlign: 'center',
  },

  // Pass-through options for jspdf-autotable (tables)
  table: {
    theme: 'grid',
    headStyles: { fillColor: [99, 102, 241] },
  },
}

See the Options Reference for the complete list of every option and its default value.