Samples

This sample illustrates how to embed various raster image formats (e.g. TIFF, JPEG, JPEG2000, JBIG2, GIF, PNG, BMP, etc.) in a PDF document.

Shows how to add a text annotation to an existing page and how to create link annotations between several pages.

The sample code illustrates how to read and edit existing outline items and create new bookmarks using the high-level API.

Shows how to get each color's information. You can also show/hide specific colors.

Shows how to render three synchronized panels where the middle panel shows pixel differences between the two documents.

This sample illustrates how PDFNetJS can be used to perform complex editing on PDF documents as they are displayed in the WebViewer. Open a PDF of your choice and press the refresh button at the top right to change all text to blue and all images to red.

Edit the content of a PDF document directly.

The sample is using pdftron.PDF.Convert.ToXod() to convert/stream PDF, XPS, MS Office, RTF, HTML and other document formats to WebViewer.

This sample demonstrates how to create PDF layers (also known as Optional Content Groups - OCGs). The sample also shows how to extract and render PDF layers.

Shows how to create and add custom annotations by extending the existing annotation classes.

This sample demonstrates how to customize document save/download. In the example annotations are flattened before saving.

Shows how to customize the UI using WebViewer APIs. Includes modifying header, enabling/disabling features and hiding/showing individual elements.

Shows how to change color and opacity of form fields.

Demonstrates how to digitally sign a PDF and also how to certify a PDF doc.

Illustrates how to use PDFNet page writing API, how to embed fonts and images and how to copy graphical elements from one page to another.

The sample code shows how to edit the page display list and how to modify graphics state attributes on existing Elements. In particular the sample program strips all images from the page and changes text color to blue.

Illustrates how to traverse page display list using ElementReader.

Demonstrates how to encrypt and decrypt files by adding or removing passwords.

The sample illustrates how to extract an SDF document from a PDF document and change some of its values.

Demonstrates how to extract canvas of each page. The sample uses turn.js to render them.

This sample demonstrates how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Loading WebViewer's lib from a different domain using CORS.

Sample to implement WebViewer offline using service worker and localforage.

Integrating Apryse WebViewer in Salesforce as a Lightning Web Component. Note that Salesforce static resources have file size limitation to 5MB, to safely upload to the Salesforce platform.

This sample adds a type definitions file to use the WebViewer API in TypeScript.

This sample automatically detects faces in a PDF document and redacts them using WebViewer.

Sample project to implement WebViewer in a Vanilla JavaScript.

Save and load annotations to a server-side database using SQLite3 and XFDF.

Loads and annotates HTML5 videos (.mp4, ogg, webm)

This React sample uses the audio addon for WebViewer to load, annotate and redact audio tracks.

Merge and rearrange pages from multiple documents using a drop zone. Note that this is only enabled for client-side PDF and Office documents.

This JavaScript sample creates DOCX documents and displays them in WebViewer.

Sample to integrate Apryse WebViewer in React and create vector-quality custom annotations.

This sample integrates WebViewer into a Blazor Project.

This sample integrates WebViewer into a Blazor WebAssembly Project.

This sample integrates WebViewer into an Electron project.

Sample of WebViewer integration into a Mendix low-code app.

WebViewer implementation on a Microsoft Teams project.

Save and load annotations using files and Node.js backend.

Save and load XFDF annotations using files and Node.js backend.

Sample project integrating WebViewer with Nuxt 2.

Sample project to implement WebViewer into a React project.

Sample project to implement a WebViewer into React for generating barcodes, stamping them onto a PDF and then reading them after they have been flattened.

How to View, Edit, Annotate and Redact Salesforce Record Attachment Files in a Lightning Web Component.

This sample adds WebViewer as a Web Application that is hosted on a Tomcat Servlet.

Integrating Apryse WebViewer into a Flutter web project.

This sample provides a server side Mendix Web Module for WebViewer.

This sample adds WebViewer into a TSX component for use in a Next.js 14 Project.

Sample project to integrate WebViewer with Node.js enabling server-side searches.

This sample shows how to integrate WebViewer into a Power Apps component project.

Sample that demonstrates several features to customize WebViewer into a React app that renders without <iFrame>, <button> elements for expanded functions, and on leveraging search APIs.

This sample adds WebViewer into a Svelte component for use in a Svelte project.

This sample adds WebViewer into a Vue component for use in a Vue.js project

This sample integrates WebViewer into a WinForms project using Microsoft Edge's WebView2 control.

This sample shows how a WebViewer VanillaJS app can be retrieved and delivered by jQuery CDN.

Save and load annotations to disk using XFDF and HTTP messaging

This sample shows how to integrate WebViewer into an Angular project.

Sample project that implements WebViewer into a PHP backend development environment.

Sample WebViewer project with a Node.js backend that enables save/load user bookmarks.

This sample shows how to construct a collaboration server for WebViewer through WebSocket, SQLite3, and Node.js.

Illustrates how to create and edit interactive forms (check boxes and text boxes).

Shows how to get each layer's information. You can also show/hide specific layers.

This sample illustrates how to traverse the structure and content of a tagged PDF document.

Shows how to create annotations that measure distance, perimeter and area.

The sample illustrates how to translate a PDF image by extracting and manipulating the image's media box.

The sample illustrates how to copy pages from one document to another, how to delete, and re-arrange pages and how to use ImportPages() method for very efficient copy and merge operations.

Bind templates to content in .docx and .xlsx files.

This sample illustrates how to convert office files to PDF.

The sample illustrates how to reduce PDF file size using 'pdftron.PDF.Optimizer'. It also shows how to simplify and optimize PDF documents for viewing on mobile devices and on the Web using 'pdftron.PDF.Flattener'.

This sample illustrates how PDFNetJS can be used to compare two PDF documents and show their difference in WebViewer.

This sample demonstrates PDFA verification and conversion.

Shows how to rotate/crop/add/delete page, change page order, insert blank pages and merge multiple documents.

Shows how to preload WebViewer and documents to improve user experience.

This sample illustrates how PDFNetJS can be used to preprocess a document before displaying it with WebViewer.

This sample demonstrates Reader Mode in WebViewer.

An example setup with Firebase backend. For more details, refer to realtime collaboration guide .

Shows how to redact and permanently remove text, images or graphics from a document.

The sample illustrates how to create Redaction objects and use PDFNetJS's redact function to remove and overlay PDF document content.

Shows how to automatically detect and redact people faces from documents.

This sample illustrates how to use the built-in rasterizer in order to render PDF images on the fly and how to save resulting images in PNG and JPEG format.

The sample demonstrates replacement of objects such as images, text and strings within a document.

This sample demonstrates how to use PDFNetJS to select elements in a PDF document. Click on an element in the PDF and it will show the element's bounding box and an outline if it is a PDF path.

This sample illustrates how to use the snap API for calculating the nearest snap point.

The sample code illustrates how to stamp text and images onto various pages in a PDF document.

Shows how to switch language.

The sample demonstrates how to extract information from text boxes such as their position, font, size, color and of course the text itself.

The sample demonstrates how to search using strings and regular expressions in a PDF document and how to set search mode and parameters.

Shows how to extract text positions from a document. The sample highlights the positions with different colors.

Demonstrates how to use accessibility feature of WebViewer to read PDF text out loud.

Shows how to use thumbnail controls for page manipulation of documents. Note that this is only enabled for client side PDF and Office documents.

Describes types of permissions and switching between users. You can also show/hide annotations of specific users.

This sample illustrates how PDFNetJS can be used to validate digital signatures in a document.

Compares viewing an unoptimized PDF with the same viewer optimized PDF side by side

Shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Shows how to load XOD files, which are generated from a custom server.

Shows how to call WebViewer constructor to instantiate and load document using WebViewer with WebViewer Server. You can upload local files or load files that are publicly accessible.

PDFNet includes full support for FDF (Forms Data Format) and the capability to merge/extract forms data (FDF) with/from PDF. The sample illustrates basic XFDF merge functionality available in PDFNet.