Standard API for WebViewer

WebViewer provides a standard API that works the same way for any of the deployment options . This allows you to easily try out different WebViewer deployment options with minimal code changes.

The WebViewer initializer gives you an instance object that provides a number of functions and objects. The standard API is a combination of the default WebViewer UI APIs and the WebViewer Core APIs.

WebViewer({
  path: '...',
}, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
  });

The Core namespace contains classes and objects for working with the document viewer and documents in WebViewer. Of the many objects and classes within this space, documentViewer and annotationManager are commonly used objects that will allow you to work with the document and annotations.

WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // WebViewer Core APIs
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      instance.UI.openElements(['notesPanel']);
    });

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annots = annotationManager.getAnnotationsList();
      annots.forEach((annot) => {
        if (annot.PageNumber === 1) {
          // Do something
        }
      });
    });

    iinstance.UI.loadDocument('...');
  });

Some other notable namespaces that you can find under Core are:

• Annotations
• Tools
• Search
• Math

The UI namespace hosts APIs, objects, and classes in working with the WebViewer UI. Many of the customizations are available through the APIs found within this namespace.

WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // WebViewer UI APIs
    instance.UI.setHeaderItems(header => {
      header.push({
        type: 'actionButton',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
        onClick: () => {
          // save the annotations
        }
      });
    });
    instance.UI.setTheme('dark');
    instance.UI.setLanguage('es');

    instance.UI.loadDocument('...');
  });

If you would like to learn more about the UI in WebViewer, feel free to check out our guides on the UI .

The PDFNet namespace is the main exception and is also known as the full API. See this guide for more information about what it is and why you might want to use it. It will only be fully available when the full API is enabled via the WebViewer instance.

The permanent page manipulation APIs on the Document object and the applyRedactions function on AnnotationManager are only available in client only mode or with WebViewer Server. To achieve similar functionality with a custom server you would do the processing on the server side and reconvert the file.

To get started with loading your documents, please check out our document loading guide .