WebViewer UI overview

In this document
chevron_rightInitial setup
chevron_rightViewer instance
chevron_rightHelper APIs
chevron_rightAction APIs

WebViewer now comes with a new modern UI. Built in React, the new UI has been designed to be easier to use and more customizable.

WebViewer UI (beta) is

  • dynamic, meaning you can modify or trigger UI actions on fly.
  • responsive, meaning the layout auto-adjusts to device's screen size.

linkInitial setup

Follow the Download and Integration guides first. After that, pass the ui option to the constructor to enable WebViewer UI:

const viewerElement = document.getElementById('viewer');
const viewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  ...
  ui: 'beta' // must have this option to use webviewer-ui-beta
}, viewerElement);

linkViewer instance

The WebViewer app is created inside an iframe, isolated from your own HTML page. Thus, when you want to call the APIs, you must use the viewerInstance object to do so. You can get viewerInstance object when the viewer element has been rendered:

const viewerElement = document.getElementById('viewer');
const viewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  ui: 'beta'
}, viewerElement);

$(viewerElement).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  // Call apis from viewerInstance
  // ex. viewerInstance.loadDocument(...);
});

WebViewer UI still supports all existing docViewer APIs. On top of that, it contains helper and action APIs for customizations and controls.

linkHelper APIs

Helper APIs are related to WebViewer state or actions. APIs like setToolMode, executeSearch and saveAnnotations are examples of helper APIs. They are methods of viewerInstance:

Full list of Helper APIs:

linkAction APIs

Actions APIs are strictly related to the UI. APIs like openElement, setActiveLeftPanel and showNotesPanel are examples of action APIs. To avoid any conflicts, they are grouped into viewerInstance.actions:

Full list of Action APIs: