Client only sampleskeyboard_arrow_down

Client only samples

In this document
chevron_rightPDFNetJS Specific
chevron_rightCustomize UI
chevron_rightText manipulation
chevron_rightSample projects

Each of these samples is running in client only mode. The code for each of the samples is included in the WebViewer download package.

linkBasic viewer

This sample shows how to load a WebViewer instance. It also shows how to customize the page to load different files.

linkCross-origin resource sharing

This sample shows how WebViewer can be hosted on a different server than the actual documents. Here, the document files are fetched from Amazon S3. The server hosting the files must support CORS.

linkWebViewer.js custom controls

This sample shows how to use the WebViewer.js controller (JavaScript API) to create an instance of WebViewer with custom controls.

linkPDFNetJS Specific

linkColor Separations

This sample shows how to use the document color separations APIs. These APIs allow you to enable and disable particular color separations in the viewer and also retrieve the percentage of each color at a particular point on the page.

linkViewing office files

This sample shows how WebViewer can be used to view MS Office files natively within the browser. It features a filepicker, and a viewer theme that changes color dynamically based on the tytpe of file being viewed.

linkPage operations

This sample shows how to use the document page operations APIs. These APIs persist their changes to the copy of the document on the client and when downloading the file all of the changes will be present in the output PDF.

linkView PDFs with layers

This sample shows how layers within a PDF can be displayed and toggled in WebViewer.

Source: config.js

linkView local PDF

This sample shows how a local PDF file can be selected from a file picker and displayed in WebViewer. Also note the download button which allows the document to be downloaded along with all the annotations that have been added.


linkAnnotation user permissions

This sample shows how WebViewer handles user permissions for annotations. When an annotation user is set, the client-side end users can only modify annotations that were created by them.

Users can also be given administrative access, which allows modifications to annotations created by any users. Lastly, WebViewer can also be loaded in read-only mode, which allows existing annotations to be displayed but users will not be allowed to create new annotations.

linkRealtime collaboration

This sample shows how the setup HTML5 WebViewer to have realtime syncing of annotations with a server. This example uses Firebase as an example backend. The sample source file main.js and server.js include code that defines how to import/export annotations and add event listeners to annotation add/edit/delete events.

Sources: main.js, server.js

linkHide/Show annotations of specific users

This sample shows how annotations from specific users can be hidden and shown. This could allow you to only display annotations from the current user for example.

Source: config.js

linkStamp annotation from image

This sample shows how a stamp annotation can have an image associated with it.

Source: config.js

linkCustom Annotations

This sample shows how the HTML5 WebViewer can be extended with custom annotations and tools via the Annotation Framework. A custom tool is added to the annotation panel to create a diamond annotation. The sample source file diamond.js includes code that defines the appearance of the annotation, as well as the selection box and control handle behaviors.

Source: diamond.js

linkAnnotation support

This sample shows the HTML5 WebViewer's out-of-the-box support for annotations. WebViewer supports the creation of many annotation types, such as: line, ellipse, text highlight and underline (among others). By default, all WebViewer annotations are compatible with PDF annotations and vice versa (WebViewer annotations can be imported from and exported to the XFDF XML format).


linkCustomize forms

This sample shows how to customize the styles of form fields. It changes the colors of text fields and buttons dynamically.

Source: config.js

linkForm actions

This sample demonstrates the different form actions that are supported by WebViewer. Actions should be added to fields in the PDF document.

linkForm support

This sample shows how the HTML5 WebViewer supports PDF form actions. Form submit actions can be directly to a server from the WebViewer. To see it live, fill in some data in the text boxes and click submit at the bottom of the document.

linkCustomize UI

linkCustomize signature

This sample shows how to customize the signature tool. It draws a custom background on the signature menu and then saves and loads the default signature from localStorage.

Source: config.js

linkCustom horizontal display mode

This sample shows how to create a custom display mode by overriding display mode functions. The sample creates a basic horizontal layout.

Source: config.js

linkCustomization: UI controls

This sample shows how the HTML5 WebViewer can be customized in a clean and simple manner. Through an external configuration script that can be loaded at run-time, the WebViewer's theme, branding, or even default behaviors can be changed.

Source: config.js

linkText manipulation

linkGet text position

This sample shows how to get the positions of characters on a page. It then adds highlight annotations over instances of the word WebViewer.

Source: config.js


linkInternationalization support

This sample shows how the HTML5 WebViewer supports internationalization. Additional custom translations can be easily added by copying and modifying the English translation json file.

Source: config.js

linkSample projects

Find these projects inside the samples folder of the WebViewer download package.


This sample shows how to integrate WebViewer into an Angular application. It creates a component for WebViewer and shows how you can interact with the WebViewer API from other components.

Sources: webviewer.component.ts, app.component.ts