Blog Post

Top JavaScript PDF Editors for Your Web Applications

Q: What are the key features of pdf-lib?

pdf-lib allows you to: 1. Create new PDFs from scratch. 2. Modify existing PDFs by adding text, images, and graphics. 3. Work directly in the browser or Node.js. 4. Embed fonts and handle complex document structures.

Q: How can I integrate PSPDFKit into my web application?

To integrate PSPDFKit: 1. Install it using Yarn or npm. 2. Include the PSPDFKit library in your project. 3. Set up an HTML structure to host the viewer. 4. Initialize PSPDFKit in your JavaScript code by specifying the base URL and document path.

Q: Where can I find more examples and documentation for pdf-lib and PSPDFKit?

For more examples and documentation: 1. **pdf-lib**: Visit the pdf-lib documentation. 2. **PSPDFKit**: Check out the PSPDFKit documentation.

Hulya Masharipov

How To JavaScript PDF Editor

In web development, handling PDFs efficiently can improve your application. Whether you need to add annotations, fill out forms, or make content adjustments, a reliable PDF editing tool is key to providing a good user experience.

Two standout options for integrating PDF functionalities into your web application are pdf-lib and PSPDFKit. Both libraries provide robust solutions — from lightweight, open source alternatives, to full-featured commercial offerings — to suit various project needs.

This post will first look at pdf-lib and then explore the PSPDFKit PDF editor to help you determine which one best fits your needs.

Requirements

Node.js installed on your machine.
npm (Node Package Manager) or Yarn for managing packages.

1. pdf-lib

pdf-lib is a popular free JavaScript library for creating and editing PDF documents directly in the browser or Node.js. It’s lightweight and highly customizable, allowing developers to build their own PDF editing interfaces.

Key Features

Create PDFs from scratch — Generate new PDF documents with custom content.
Modify existing PDFs — Edit existing PDFs by adding or changing text, images, and graphics.
No dependencies — A self-contained library with no external dependencies.
Cross-platform compatibility — Works in both browser and Node.js environments.

Limitations

Basic annotation support — Lacks support for advanced annotations or commenting features.
No built-in viewer — Doesn’t provide a built-in PDF viewer; you need to integrate a separate viewer for displaying PDFs.

How to Use pdf-lib for PDF Editing

Set up your project directory with an index.html and index.js file. For instance:

mkdir pdf-lib-example
cd pdf-lib-example
touch index.html index.js

Create a simple HTML structure in index.html to include an iframe for displaying the PDF:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>PDF Editing with pdf-lib</title>
		<style>
			#pdf {
				width: 100%;
				height: 100vh;
				border: 1px solid #ccc;
			}
		</style>
		<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.js"></script>
	</head>
	<body>
		<iframe id="pdf"></iframe>
		<script src="index.js"></script>
	</body>
</html>

This HTML file includes an iframe where the modified PDF will be displayed. The script tag loads the pdf-lib library from unpkg, allowing you to use its functionality in your project.

In index.js, use pdf-lib to modify an existing PDF and display it in the iframe:

const { degrees, PDFDocument, rgb, StandardFonts } = PDFLib;

async function modifyPdf() {
	// URL of an existing PDF document.
	const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf';

	// Fetch the existing PDF document.
	const existingPdfBytes = await fetch(url).then((res) =>
		res.arrayBuffer(),
	);

	// Load the existing PDF document.
	const pdfDoc = await PDFDocument.load(existingPdfBytes);

	// Embed the Helvetica font.
	const helveticaFont = await pdfDoc.embedFont(
		StandardFonts.Helvetica,
	);

	// Get the first page of the document.
	const pages = pdfDoc.getPages();
	const firstPage = pages[0];

	// Get page dimensions.
	const { width, height } = firstPage.getSize();

	// Draw new text on the page.
	firstPage.drawText('This text was added with JavaScript!', {
		x: 5,
		y: height / 2 + 300,
		size: 50,
		font: helveticaFont,
		color: rgb(0.95, 0.1, 0.1),
		rotate: degrees(-45),
	});

	// Serialize the `PDFDocument` to bytes.
	const pdfBytes = await pdfDoc.save();

	// Create a Blob from the PDF bytes.
	const blob = new Blob([pdfBytes], { type: 'application/pdf' });

	// Create a URL for the Blob and set it as the source of the iframe.
	const urlObject = URL.createObjectURL(blob);
	document.getElementById('pdf').src = urlObject;
}

// Call `modifyPdf` when the page loads.
modifyPdf();

This JavaScript code performs the following:

Fetches an existing PDF from a URL.
Loads the PDF and modifies it by adding text.
Displays the modified PDF in the iframe by converting it to a Blob and setting a URL for it.

PDF Editing with pdf-lib

pdf-lib is an excellent choice for developers who need a lightweight and flexible library. For more detailed examples and usage of pdf-lib, check out our other blog posts:

2. PSPDFKit JavaScript PDF Editor Library

If you’re looking for a robust and comprehensive solution for handling PDF editing directly within your web application, PSPDFKit offers a full-featured JavaScript PDF editor. It provides an extensive set of functionalities out of the box, making it an excellent choice for commercial use.

Key Features

Annotation tools for text, highlights, stamps, and drawings.
Form filling and editing.
Document manipulation (reordering, adding, or deleting pages).
Digital signatures.
Customizable UI.
Cross-platform support for Web, iOS, and Android.

Getting Started with PSPDFKit

Integrating PSPDFKit into your project is straightforward. Before you begin, ensure you have the latest version of Node.js installed and a compatible package manager such as Yarn.

Step 1 — Installing PSPDFKit

To add PSPDFKit to your project, first, install it via Yarn or npm:

yarn add pspdfkit

npm
npm install pspdfkit

After the installation, copy the library distribution files into your project’s assets directory:

cp -R ./node_modules/pspdfkit/dist/ ./assets/

Ensure that the assets directory includes the pspdfkit.js file and the pspdfkit-lib folder containing necessary library files.

Step 2 — Setting Up Your HTML and JavaScript

Next, create a simple HTML structure that will serve as the foundation for your PDF viewer:

<!DOCTYPE html>
<html>
	<head>
		<title>PDF Viewer</title>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
	</head>
	<body>
		<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
		<script type="module" src="index.js"></script>
	</body>
</html>

Add an empty <div> element with a specific width and height, where PSPDFKit will be rendered.

Step 3 — Initializing PSPDFKit in JavaScript

In your JavaScript file (index.js), import PSPDFKit and initialize it:

import './assets/pspdfkit.js';

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: '#pspdfkit',
	document: '/document.pdf',
})
	.then((instance) => {
		console.log('PSPDFKit loaded', instance);
	})
	.catch((error) => {
		console.error(error.message);
	});

This code snippet tells PSPDFKit where to find its assets and loads the PDF document you want to display.

Step 4 — Serving Your Project

To serve the project locally, you can use a simple HTTP server. Install the serve package globally:

yarn global add serve

Then, serve the contents of your directory:

serve -l 8080 .

Open http://localhost:8080 in your browser to view the website and start editing your PDFs.

Why Choose PSPDFKit?

PSPDFKit is packed with features that make it stand out as a comprehensive commercial PDF editor:

Customizable UI — Offers a highly customizable, ready-to-use interface that saves time and development effort.
Cross-device syncing — Integrates with a syncing framework like PSPDFKit Instant, allowing users to maintain changes across devices.
Advanced features — Supports complex functionalities such as annotations, redactions, digital signatures, and real-time collaboration.
Office document support — Allows viewing and editing of Word, Excel, and PowerPoint files directly within the PDF viewer.
Dedicated support — Provides access to professional customer support to help streamline integration and resolve any issues quickly.

While pdf-lib is great for basic editing and viewing functionalities, PSPDFKit is ideal for applications that need a professional-grade PDF editor with extensive customization options and enhanced user experience.

By opting for PSPDFKit, you gain access to powerful tools and features that help you deploy faster, reduce development effort, and deliver a seamless PDF editing experience for your users.

PSPDFKit offers a rich set of capabilities that can significantly speed up the development process, particularly for enterprises and businesses that require a fully featured PDF editor in their applications.

Conclusion

Choosing the right JavaScript library for PDF and document editing depends on your project’s requirements. Whether you need a lightweight and flexible library like pdf-lib, or the full-featured capabilities of PSPDFKit, there’s a tool tailored to your needs. Evaluate each based on your budget, user needs, and project scope to find the best fit.

To see what PSPDFKit can bring to your web application, explore our demo or reach out to our Sales team for more information.

FAQ

Here are a few frequently asked questions about JavaScript PDF editors.

What is pdf-lib and how can it be used?

pdf-lib is a JavaScript library for creating, editing, and modifying PDF documents directly in the browser or Node.js. It supports generating new PDFs, editing existing ones, and adding content like text and images. You can use pdf-lib via a CDN for quick inclusion, or install it using npm/Yarn for more integrated project setups.

How does PSPDFKit differ from pdf-lib?

PSPDFKit is a commercial library offering advanced PDF editing features such as annotations, form filling, digital signatures, and a customizable UI. Unlike pdf-lib, which is free and more basic, PSPDFKit provides extensive functionality for professional use. PSPDFKit includes advanced features and a user-friendly interface.

What are the key features of pdf-lib?

pdf-lib allows you to:

Create new PDFs from scratch.
Modify existing PDFs by adding text, images, and graphics.
Work directly in the browser or Node.js.
Embed fonts and handle complex document structures.

How can I integrate PSPDFKit into my web application?

To integrate PSPDFKit:

Install it using Yarn or npm.
Include the PSPDFKit library in your project.
Set up an HTML structure to host the viewer.
Initialize PSPDFKit in your JavaScript code by specifying the base URL and document path.

Where can I find more examples and documentation for pdf-lib and PSPDFKit?

For more examples and documentation:

pdf-lib — Visit the pdf-lib documentation.
PSPDFKit — Check out the PSPDFKit documentation.

Author

Hulya Masharipov Technical Writer

Hulya is a frontend web developer and technical writer at PSPDFKit who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

Top JavaScript PDF Editors for Your Web Applications

Requirements

1. pdf-lib

Key Features

Limitations

How to Use pdf-lib for PDF Editing

2. PSPDFKit JavaScript PDF Editor Library

Key Features

Getting Started with PSPDFKit

Step 1 — Installing PSPDFKit

Step 2 — Setting Up Your HTML and JavaScript

Step 3 — Initializing PSPDFKit in JavaScript

Step 4 — Serving Your Project

Why Choose PSPDFKit?

Conclusion

FAQ

What is pdf-lib and how can it be used?

How does PSPDFKit differ from pdf-lib?

What are the key features of pdf-lib?

How can I integrate PSPDFKit into my web application?

Where can I find more examples and documentation for pdf-lib and PSPDFKit?

Related Products

PSPDFKit for Web

Share Post

Related Articles

Build a Powerful JavaScript Document Viewer and Editor

How to Convert DOCX to WebP Using Python

How to Sign a PDF on iOS with PSPDFKit's Signature Library