jsPDF Markdown Renderer

A jsPDF utility to render Markdown directly into formatted PDFs with custom designs.

Table of Contents

• Installation
• Usage
• Browser Runtime Usage
• API
• Examples
• Contributing
• License

Installation

To install the library, you can use npm:

npm install jspdf-md-renderer

Usage

Basic Example

Here is a basic example of how to use the library to generate a PDF from Markdown content:

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

const mdString = `
# Main Title

This is a brief introduction paragraph. It sets the tone for the document and introduces the main topic in a concise manner.

## Section 1: Overview

Here is a medium-length paragraph that goes into more detail about the first section. It explains the context, provides background information, and sets up the discussion for the subsections.

## Section 2: Lists and Examples

This section showcases how to create simple and nested lists.

### Simple List

- Item 1
- Item 2
- Item 3

### Nested List

1. First Level 1
   - First Level 2
     - First Level 3
2. Second Level 1
   - Second Level 2
   - Another Second Level 2
     - Nested deeper

### Mixed List Example

- Topic 1
  1. Subtopic 1.1
  2. Subtopic 1.2
- Topic 2
  - Subtopic 2.1
  - Subtopic 2.2
    1. Nested Subtopic 2.2.1
    2. Nested Subtopic 2.2.2

### Emphasis and Strong Emphasis
- *Italic* text using asterisks.
- _Italic_ text using underscores.
- **Bold** text using double asterisks.
- __Bold__ text using double underscores.
- ***Bold and Italic*** text using triple asterisks.
- ___Bold and Italic___ text using triple underscores.

`;

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

    const options = {
        cursor: { x: 10, y: 10 },
        page: {
            format: 'a4',
            unit: 'mm',
            orientation: 'portrait',
            maxContentWidth: 190,
            maxContentHeight: 277,
            lineSpace: 1.5,
            defaultLineHeightFactor: 1.2,
            defaultFontSize: 12,
            defaultTitleFontSize: 14,
            topmargin: 10,
            xpading: 10,
            xmargin: 10,
            indent: 10,
        },
        font: {
            bold: { name: 'helvetica', style: 'bold' },
            regular: { name: 'helvetica', style: 'normal' },
            light: { name: 'helvetica', style: 'light' },
        },
        endCursorYHandler: (y) => {
            console.log('End cursor Y position:', y);
        },
    };

    await MdTextRender(doc, mdString, options);
    doc.save('example.pdf');
};

generatePDF();

Browser Runtime Usage

Option 1: Use with your app bundler (Vite/Webpack/Rollup)

Install dependencies and import from modules as usual:

import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';
import { MdTextRender } from 'jspdf-md-renderer';

Option 2: Use directly via script tags (UMD)

Load dependencies first, then load jspdf-md-renderer UMD bundle.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@latest/dist/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf-md-renderer@latest/dist/index.umd.js"></script>
<script>
  const { jsPDF } = window.jspdf;
  const { MdTextRender } = window.JspdfMdRenderer;

  (async () => {
    const doc = new jsPDF();
    await MdTextRender(doc, '# Hello from browser runtime');
    doc.save('browser-runtime.pdf');
  })();
</script>

Note: For script-tag usage you must include marked, jspdf, and jspdf-autotable before the renderer bundle.

API

MdTextRender

Renders parsed markdown text into a jsPDF document.

Parameters

• doc: The jsPDF document instance.
• text: The markdown content to render.
• options: The render options (fonts, page margins, etc.).

MdTextParser

Parses markdown into tokens and converts to a custom parsed structure.

Parameters

• text: The markdown content to parse.

Returns

• Promise<ParsedElement[]>: Parsed markdown elements.

Supported Markdown Elements

The following Markdown elements are currently supported by jspdf-md-renderer:

• Headings: #, ##, ###, etc.

• Paragraphs

• Lists:

  • Unordered lists: -, *, +
  • Ordered lists: 1., 2., 3., etc.

• Horizontal Rules: ---, ***, ___

• Text Styles:

  • Bold: **bold** or __bold__
  • Italic: *italic* or _italic_
  • Bold Italic: ***bold italic*** or ___bold italic___

• Code Blocks (fenced and indented):

  ```js
  console.log('Hello, world!');
  ```

• Links:

  [GitHub](https://github.com)

• Blockquotes:

  > This is a blockquote.

• Images:

  ![Alt text](https://example.com/image.png)

  Images render at their intrinsic (original) size by default and scale down automatically if they exceed the available page width. You can control image dimensions and alignment using an optional attribute block {...} after the image syntax:

  Custom Attributes: | Attribute | Description | Example | |-----------|-------------|---------| | width or w | Image width in px | {width=200} or {w=200} | | height or h | Image height in px | {height=150} or {h=150} | | align | Alignment: left, center, right | {align=center} |

  Sizing Rules:

  • If only width is given, height is auto-calculated from aspect ratio
  • If only height is given, width is auto-calculated from aspect ratio
  • If both are given, the image uses exact dimensions (may distort if ratio differs)
  • Images that exceed page bounds are always scaled down proportionally

  Examples:

  ![photo](https://example.com/photo.png)
  ![photo](https://example.com/photo.png){width=200}
  ![photo](https://example.com/photo.png){h=150 align=center}
  ![photo](https://example.com/photo.png){width=200 height=150 align=right}

  Global Default Alignment: You can set a default alignment for all images via the image option:

  const options = {
      // ...other options
      image: {
          defaultAlign: 'center', // 'left' (default) | 'center' | 'right'
      },
  };

• Inline Code:

  This is an `inline code` example.

• Tables:

  | Header 1 | Header 2 | Header 3 |
  | -------- | -------- | -------- |
  | Row 1    | Data     | Value    |
  | Row 2    | Data     | Value    |

Examples

You can explore complete rendered examples in the documentation site:

• Resume example
• Invoice example
• Technical report example
• Custom fonts guide

Contributing

Contributions are welcome! Please read the contributing guidelines first.

Support

If you find this library useful, please consider giving it a ⭐ on GitHub! It helps others find the project and motivates continued development.

License

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