PDF Generation, Manipulation, and Rendering in JavaScript
This comparison covers the primary JavaScript libraries for handling PDFs in web applications. jspdf, pdf-lib, pdfkit, and pdfmake focus on creating or modifying PDF documents programmatically. pdfjs (PDF.js) and react-pdf focus on rendering and viewing existing PDF files within the browser. Choosing the right tool depends on whether you need to generate reports, fill forms, edit existing documents, or simply display PDF content to users.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
PDF Generation, Manipulation, and Rendering in JavaScript
Handling PDFs in JavaScript falls into two distinct categories: creating or modifying documents, and viewing them. The packages jspdf, pdf-lib, pdfkit, and pdfmake are generators. The packages pdfjs and react-pdf are viewers. Mixing these up is a common architectural mistake. Let's break down how they work in real engineering scenarios.
π οΈ Core Purpose: Creation vs. Modification vs. Viewing
Understanding the primary goal of each library is the first step in selection.
jspdf creates new PDFs from scratch in the browser.
- It draws text, lines, and images onto a virtual canvas.
- It does not handle editing existing PDF files well.
// jspdf: Create a new document
import jsPDF from 'jspdf';
const doc = new jsPDF();
doc.text('Hello World', 10, 10);
doc.save('document.pdf');
pdf-lib creates and modifies existing PDFs.
- It can load a buffer, change content, and save it.
- Great for merging, splitting, or filling forms.
// pdf-lib: Modify an existing PDF
import { PDFDocument } from 'pdf-lib';
const existingPdfBytes = await fetch('/form.pdf').then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
const form = pdfDoc.getForm();
form.getTextField('name').setText('John Doe');
const pdfBytes = await pdfDoc.save();
pdfkit creates new PDFs, primarily in Node.js.
- It uses a streaming architecture for memory efficiency.
- Ideal for server-side report generation.
// pdfkit: Stream a new document (Node.js)
import PDFDocument from 'pdfkit';
import fs from 'fs';
const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello World', 100, 100);
doc.end();
pdfmake creates new PDFs using a document definition object.
- Abstracts away coordinates; you define structure.
- Works in both browser and Node.js.
// pdfmake: Define structure
import pdfMake from 'pdfmake/build/pdfmake';
const docDefinition = {
content: [{ text: 'Hello World', fontSize: 12 }]
};
pdfMake.createPdf(docDefinition).download();
pdfjs renders PDFs to HTML5 Canvas.
- It does not create PDFs.
- It parses the binary format to draw pixels.
// pdfjs: Render a page to canvas
import * as pdfjsLib from 'pdfjs-dist';
const loadingTask = pdfjsLib.getDocument('url/to/file.pdf');
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1);
const canvas = document.getElementById('canvas');
const renderContext = { canvasContext: canvas.getContext('2d'), viewport: page.getViewport({ scale: 1.5 }) };
await page.render(renderContext).promise;
react-pdf renders PDFs using React components.
- It wraps
pdfjsfor easier integration in React apps. - Handles state and pagination automatically.
// react-pdf: Display in React
import { Document, Page } from 'react-pdf';
function MyApp() {
return (
<Document file="/sample.pdf">
<Page pageNumber={1} />
</Document>
);
}
π API Style: Imperative vs. Declarative
How you write code differs significantly between these tools.
jspdf, pdf-lib, and pdfkit use an imperative style.
- You command the library step-by-step (move to X,Y, draw text, draw line).
- Gives full control but requires manual layout math.
// jspdf: Imperative coordinates
doc.text('Title', 20, 20);
doc.line(20, 25, 200, 25);
// pdf-lib: Imperative modification
page.drawText('Approved', { x: 50, y: 500, size: 15 });
// pdfkit: Imperative streaming
doc.fontSize(25).text('Title', 100, 100);
pdfmake uses a declarative style.
- You describe what the document looks like.
- The engine calculates positions and pagination.
// pdfmake: Declarative structure
const docDefinition = {
content: [
{ text: 'Title', style: 'header' },
{ text: 'Body content...' }
],
styles: { header: { fontSize: 18, bold: true } }
};
pdfjs and react-pdf are rendering engines.
- You configure the viewer, not the content layout.
- Focus is on viewport, scale, and navigation.
// pdfjs: Configure viewer params
const viewport = page.getViewport({ scale: 1.0 });
// react-pdf: Configure component props
<Page pageNumber={1} scale={1.5} renderAnnotationLayer={true} />
π Environment Support: Browser vs. Node.js
Deployment targets often dictate the choice.
jspdf is designed for the browser.
- Can run in Node but requires polyfills for some features.
- Best for client-side downloads.
// jspdf: Browser focus
// Works directly in window context
const doc = new jsPDF();
pdf-lib is universal (Browser + Node).
- No external dependencies.
- Consistent API across environments.
// pdf-lib: Universal
// Same code runs in React, Vue, or Express
const pdfDoc = await PDFDocument.create();
pdfkit is primarily Node.js.
- Relies on Node streams and file system modules.
- Browser usage requires bundling and is heavier.
// pdfkit: Node focus
import fs from 'fs'; // Node specific
const stream = fs.createWriteStream('file.pdf');
pdfmake is universal (Browser + Node).
- Provides separate builds for each environment.
- Handles fonts differently in each context.
// pdfmake: Universal builds
// Browser: pdfmake/build/pdfmake.js
// Node: pdfmake/build/pdfmake.js (with vfs_fonts)
pdfjs is universal but heavy for Node.
- Primarily optimized for browser rendering.
- Node usage usually for text extraction or conversion.
// pdfjs: Browser optimized
// Requires worker configuration in browser
pdfjsLib.GlobalWorkerOptions.workerSrc = '.../pdf.worker.min.js';
react-pdf is for React (Browser).
- Depends on React DOM.
- Not suitable for server-side PDF generation.
// react-pdf: React specific
// Must be used within a React component tree
import { Document } from 'react-pdf';
πΌοΈ Handling Assets: Images and Fonts
Embedding media is a common pain point.
jspdf supports images and custom fonts.
- Fonts must be added as base64 strings or VFS.
- Images need to be loaded before drawing.
// jspdf: Add image
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 10, 180, 160);
pdf-lib embeds images and fonts easily.
- Supports PNG, JPEG, and standard fonts.
- Custom fonts require loading font bytes.
// pdf-lib: Embed font
const fontBytes = await fetch('/font.ttf').then(res => res.arrayBuffer());
const customFont = await pdfDoc.embedFont(fontBytes);
page.drawText('Custom', { font: customFont });
pdfkit has robust font and image support.
- Supports vector images (SVG) via plugins.
- Handles font fallbacks well in Node.
// pdfkit: Register font
doc.registerFont('OpenSans', 'path/to/OpenSans-Regular.ttf');
doc.font('OpenSans').text('Hello');
pdfmake manages fonts via Virtual File System (VFS).
- You must build a custom fonts file for production.
- Images are defined in the content array.
// pdfmake: Image in content
const docDefinition = {
content: [{ image: 'data:image/png;base64,...', width: 150 }]
};
pdfjs renders existing assets.
- Does not embed new assets; it displays what is in the PDF.
- Font rendering is handled internally by the viewer.
// pdfjs: No asset embedding
// Assets are part of the loaded PDF binary
react-pdf renders existing assets.
- Passes file URL or blob to the Document component.
- Asset management is handled by the host app.
// react-pdf: Pass file source
<Document file={{ url: '/assets/report.pdf' }} />
π Summary: Generation Capabilities
| Package | Create New | Edit Existing | Fill Forms | Streaming | Layout Style |
|---|---|---|---|---|---|
jspdf | β | β | β | β | Imperative |
pdf-lib | β | β | β | β | Imperative |
pdfkit | β | β | β | β | Imperative |
pdfmake | β | β | β | β | Declarative |
pdfjs | β | β | β | β | N/A (Viewer) |
react-pdf | β | β | β | β | N/A (Viewer) |
π Summary: Environment & Use Case
| Package | Best Environment | Primary Use Case | Complexity |
|---|---|---|---|
jspdf | Browser | Simple client-side receipts | Low |
pdf-lib | Browser / Node | Merging, editing, forms | Medium |
pdfkit | Node.js | Server-side reports, invoices | High |
pdfmake | Browser / Node | Standardized business docs | Low |
pdfjs | Browser | Custom PDF viewers | High |
react-pdf | React (Browser) | Displaying PDFs in React | Low |
π‘ The Big Picture
For Generation: If you need to build a document from scratch in the browser with simple layout, jspdf is the quick choice. For complex, standardized reports, pdfmake saves time on layout math. On the server, pdfkit provides the performance and streaming needed for large-scale generation. If you need to modify an existing file or fill a form, pdf-lib is the only robust option that works everywhere.
For Viewing: Do not try to build a viewer with generation libraries. Use pdfjs if you need full control over the rendering canvas. Use react-pdf if you are in a React ecosystem and want a drop-in component to display files.
Final Thought: The most common architectural error is trying to use a viewer library to create PDFs, or using a browser-only generator on the server. Define your requirement first β Create, Edit, or View β then pick the tool built for that job.
How to Choose: jspdf vs pdf-lib vs pdfjs vs pdfkit vs pdfmake vs react-pdf
- jspdf:
Choose
jspdffor simple client-side PDF generation where bundle size is not a critical concern. It is well-suited for basic reports, tickets, or certificates generated directly in the browser without server interaction. Avoid it for complex layouts or editing existing PDFs. - pdf-lib:
Choose
pdf-libwhen you need to modify existing PDFs, fill forms, or merge documents in the browser or Node.js. It offers a modern API and supports encryption. It is the best choice for tasks like stamping documents, merging files, or flattening forms. - pdfjs:
Choose
pdfjs(typically installed aspdfjs-dist) when you need low-level control over PDF rendering or want to build a custom PDF viewer from scratch. It is the engine behind most web-based PDF viewers and is ideal for extracting text or rendering pages to canvas. - pdfkit:
Choose
pdfkitfor server-side PDF generation in Node.js environments requiring streaming support or complex vector graphics. It is a low-level library, making it perfect for building higher-level tools or generating large files without loading everything into memory. - pdfmake:
Choose
pdfmakeif you prefer defining documents using a declarative JSON structure rather than imperative drawing commands. It is excellent for standard business documents like invoices and reports where layout consistency is more important than custom graphics. - react-pdf:
Choose
react-pdfwhen building a React application that needs to display PDF files. It wraps PDF.js to provide React components for rendering pages, making it easier to integrate PDF viewing into a React UI compared to using PDF.js directly.
Popular Comparisons
README for jspdf
A library to generate PDFs in JavaScript.
You can catch me on twitter: @MrRio or head over to my company's website for consultancy.
jsPDF is now co-maintained by yWorks - the diagramming experts.
Live Demo | Documentation
Install
Recommended: get jsPDF from npm:
npm install jspdf --save
# or
yarn add jspdf
Or always get latest version via unpkg
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
The dist folder of this package contains different kinds of files:
- jspdf.es.*.js: Modern ES2015 module format.
- jspdf.node.*.js: For running in Node. Uses file operations for loading/saving files instead of browser APIs.
- jspdf.umd.*.js: UMD module format. For AMD or script-tag loading.
- polyfills*.js: Required polyfills for older browsers like Internet Explorer. The es variant simply imports all
required polyfills from
core-js, the umd variant is self-contained.
Usually it is not necessary to specify the exact file in the import statement. Build tools or Node automatically figure out the right file, so importing "jspdf" is enough.
Usage
Then you're ready to start making your document:
import { jsPDF } from "jspdf";
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
If you want to change the paper size, orientation, or units, you can do:
// Landscape export, 2Γ4 inches
const doc = new jsPDF({
orientation: "landscape",
unit: "in",
format: [4, 2]
});
doc.text("Hello world!", 1, 1);
doc.save("two-by-four.pdf");
Running in Node.js
const { jsPDF } = require("jspdf"); // will automatically load the node version
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf"); // will save the file in the current working directory
Other Module Formats
AMD
require(["jspdf"], ({ jsPDF }) => {
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
});
Globals
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
Security
We strongly advise you to sanitize user input before passing it to jsPDF!
For reporting security vulnerabilities, please see SECURITY.md.
Reading files from the local file system on node
When running under Node.js, jsPDF will restrict reading files from the local file system by default.
Strongly recommended: use Node's permission flags so the runtime enforces access:
node --permission --allow-fs-read=... ./scripts/generate.js
See Node's documentation for details. Note that you need to include
all imported JavaScript files (including all dependencies) in the --allow-fs-read flag.
Fallback (not recommended): you can allow jsPDF to read specific files by setting jsPDF.allowFsRead in your script.
import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.allowFsRead = ["./fonts/*", "./images/logo.png"]; // allow everything under ./fonts and a single file
Warning: We strongly recommend the Node flags over jsPDF.allowFsRead, as the flags are enforced by the runtime and offer stronger security.
Optional dependencies
Some functions of jsPDF require optional dependencies. E.g. the html method, which depends on html2canvas and,
when supplied with a string HTML document, dompurify. JsPDF loads them dynamically when required
(using the respective module format, e.g. dynamic imports). Build tools like Webpack will automatically create separate
chunks for each of the optional dependencies. If your application does not use any of the optional dependencies, you
can prevent Webpack from generating the chunks by defining them as external dependencies:
// webpack.config.js
module.exports = {
// ...
externals: {
// only define the dependencies you are NOT using as externals!
canvg: "canvg",
html2canvas: "html2canvas",
dompurify: "dompurify"
}
};
In Vue CLI projects, externals can be defined via the configureWebpack
or chainWebpack properties of the vue.config.js file
(needs to be created, first, in fresh projects).
In Angular projects, externals can be defined using custom webpack builders.
In React (create-react-app) projects, externals can be defined by either using
react-app-rewired or ejecting.
TypeScript/Angular/Webpack/React/etc. Configuration:
jsPDF can be imported just like any other 3rd party library. This works with all major toolkits and frameworks. jsPDF also offers a typings file for TypeScript projects.
import { jsPDF } from "jspdf";
You can add jsPDF to your meteor-project as follows:
meteor add jspdf:core
Polyfills
jsPDF requires modern browser APIs in order to function. To use jsPDF in older browsers like Internet Explorer, polyfills are required. You can load all required polyfills as follows:
import "jspdf/dist/polyfills.es.js";
Alternatively, you can load the prebundled polyfill file. This is not recommended, since you might end up loading polyfills multiple times. Might still be nifty for small applications or quick POCs.
Use of Unicode Characters / UTF-8:
The 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to integrate a custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example Chinese text in your pdf, your font has to have the necessary Chinese glyphs. So, check if your font supports the wanted glyphs or else it will show garbled characters instead of the right text.
To add the font to jsPDF use our fontconverter in /fontconverter/fontconverter.html. The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
Alternatively you can just load the content of the *.ttf file as a binary string using fetch or XMLHttpRequest and
add the font to the PDF file:
const doc = new jsPDF();
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
Advanced Functionality
Since the merge with the yWorks fork there are a lot of new features. However, some of them are API breaking, which is why there is an API-switch between two API modes:
- In "compat" API mode, jsPDF has the same API as MrRio's original version, which means full compatibility with plugins. However, some advanced features like transformation matrices and patterns won't work. This is the default mode.
- In "advanced" API mode, jsPDF has the API you're used from the yWorks-fork version. This means the availability of all advanced features like patterns, FormObjects, and transformation matrices.
You can switch between the two modes by calling
doc.advancedAPI(doc => {
// your code
});
// or
doc.compatAPI(doc => {
// your code
});
JsPDF will automatically switch back to the original API mode after the callback has run.
Support
Please check if your question is already handled at Stackoverflow https://stackoverflow.com/questions/tagged/jspdf.
Feel free to ask a question there with the tag jspdf.
Feature requests, bug reports, etc. are very welcome as issues. Note that bug reports should follow these guidelines:
- A bug should be reported as an mcve
- Make sure code is properly indented and formatted (Use ``` around code blocks)
- Provide a runnable example.
- Try to make sure and show in your issue that the issue is actually related to jspdf and not your framework of choice.
Contributing
jsPDF cannot live without help from the community! If you think a feature is missing or you found a bug, please consider if you can spare one or two hours and prepare a pull request. If you're simply interested in this project and want to help, have a look at the open issues, especially those labeled with "bug".
You can find information about building and testing jsPDF in the contribution guide
Credits
- Big thanks to Daniel Dotsenko from Willow Systems Corporation for making huge contributions to the codebase.
- Thanks to Ajaxian.com for featuring us back in 2009. (Internet Archive Wayback Machine reference)
- Our special thanks to GH Lee (sphilee) for programming the ttf-file-support and providing a large and long sought after feature
- Everyone else that's contributed patches or bug reports. You rock.
License (MIT)
Copyright (c) 2010-2025 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2025 yWorks GmbH, https://www.yworks.com/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.