Some test text!



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 -->
<!DOCTYPE html>
    <link rel="stylesheet" href="custom-ui.css">
    <div id="header">
      <div class="title">This is a custom viewer</div>
      <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 = 'Insert commercial license key here after purchase';
  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 */
html, body {
  margin: 0;
  height: 100%;

#header {
  height: 100px;

.title {
  font-size: 2em;
  font-weight: bold;

#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


Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn More