Some test text!



Interacting with Core
Creating your own UI using WebViewer Core

Core is the main engine that does document processing, canvas rendering and annotation managing.

linkInteracting with Core

Core provide an access point through a few global variables, one of them being CoreControls. This is a namespace containing WebViewer's main classes, objects and methods.

Some of the main namespaces and classes that Core exposes are:

See API documentation for the full list.

linkCreating your own UI using WebViewer Core

If you are using the default UI, you rarely have to worry about calling Core functions directly. However, you can choose not to use the provided UIs and create your own from scratch. The example below shows how to load a document in a custom viewer.

Using the DocumentViewer class will give you a scrolling viewer with caching, pre-rendering, optimized zooming, text selection, annotation creation and a number of other features built in.

Note that if you want to go even lower level you can use the Document class, in particular the loadCanvasAsync function to choose exactly when pages are rendered.

Note that when loading CoreControls.js directly yourself you'll also need to include jQuery.
<!-- custom-ui.html -->
    <link rel="stylesheet" href="custom-ui.css">
    <div id="header">
      <h1>This is a custom viewer</h1>
      <button id="zoom-out-button">Zoom out</button>
      <button id="zoom-in-button">Zoom in</button>
      <button id="create-rectangle">Rectangle</button>
      <button id="select">Select</button>
      Latest annotation change: <span id="annotation-change"></span>
    <div id="scroll-view">
      <div id="viewer"></div>
    <script src="core/external/jquery-3.2.1.min.js"></script>
    <script src="core/external/html2canvas.min.js"></script>
    <script src="core/CoreControls.js"></script>
    <script src="custom-ui.js"></script>
// custom-ui.js

CoreControls.getDefaultPdfBackendType().then(function(backendType) {
  var licenseKey = 'YOUR_LICENSE_KEY_HERE';
  var workerTransportPromise = CoreControls.initPDFWorkerTransports(backendType, {}, licenseKey);

  var docViewer = new CoreControls.DocumentViewer();
  var partRetriever = new CoreControls.PartRetrievers.ExternalPdfPartRetriever('path/to/document.pdf');

  docViewer.loadAsync(partRetriever, {
    type: 'pdf',
    backendType: backendType,
    workerTransportPromise: workerTransportPromise

  docViewer.setOptions({ enableAnnotations: true });


  docViewer.on('documentLoaded', function() {
    console.log('document loaded');

    // enable default tool for text and annotation selection

// setup event handlers for the header
var setupEventHandlers = function(docViewer) {
  document.getElementById('zoom-in-button').addEventListener('click', function() {
    docViewer.zoomTo(docViewer.getZoom() + 0.25);

  document.getElementById('zoom-out-button').addEventListener('click', function() {
    docViewer.zoomTo(docViewer.getZoom() - 0.25);

  document.getElementById('create-rectangle').addEventListener('click', function() {

  document.getElementById('select').addEventListener('click', function() {

  var annotationChangeContainer = document.getElementById('annotation-change');

  var annotManager = docViewer.getAnnotationManager();
  annotManager.on('annotationChanged', function(e, annotations, action) {
    annotationChangeContainer.textContent = action + ' ' + annotations.length;
/* custom-ui.css */
body {
  margin: 0;

#header {
  height: 100px;

#scroll-view {
  bottom: 0;
  /* leave room for 100px header */
  height: calc(100% - 100px);
  width: 100%;
  overflow: auto;

#viewer {
  margin: auto;

.pageContainer {
  border: 1px solid black;
  position: relative;

Get the answers you need: Support


Interacting with Core
Creating your own UI using WebViewer Core