Some test text!

Integrate via NPMkeyboard_arrow_down

Integrating WebViewer via NPM

WebViewer versions 6.0+ can be installed via npm. Since WebViewer requires static resources to be served (which cannot be bundled), there is an extra step required which involved manually copying these static files into your dist directory.

link1. Install via NPM

Run the following command in your project:

npm i @pdftron/webviewer

This will install the main JS entrypoint, as well as download some static assets required for WebViewer to run.

link2. Copy static assets

Next we must copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible (usually a dist or build folder). Below is a few ways you could automate this process:

npm script

You could add a script to your package.json that moves the requires for you after your build completes.

  "scripts": {
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
    "build": "mybuildscript && npm run move-static"

This will copy all required files into the dist/public folder after your build is complete.


If you're using webpack to bundle your project, you can use copy-webpack-plugin to copy files for you automatically.

Install the package:

npm install copy-webpack-plugin --save-dev

then add the following to your webpack config:

module.exports = {
  plugins: [
    new CopyPlugin([{ 
        from: './node_modules/@pdftron/webviewer/public',
        to: './dist/public/webviewer' 


If you are using parcel to bundle your project, you can use parcel-plugin-static-files-copy to copy your files.

Install the package:

npm i parcel-plugin-static-files-copy --save-dev

Then add the following to your package.json

  "staticFiles": {
    "staticPath": [
        "staticPath": "node_modules/@pdftron/webviewer/public",
        "staticOutDir": "public/webviewer"
    "watcherGlob": "**"


If you're using a different package manager, look for a plugin that copies static files at build time.

link3. Usage

When using WebViewer in your code, you will have to tell it where you copied these static files using the path parameter.

For example, if you copied the static files into dist/public/webviewer, your code would look something like this:

import WebViewer from '@pdftron/webviewer'

  path: '/public/webviewer',
}, document.getElementById('viewer'))
  .then(instance => {
    const docViewer = instance.docViewer;
    const annotManager = instance.annotManager;
    // call methods from instance, docViewer and annotManager as needed

    // you can also access major namespaces from the instance as follows:
    // const Tools = instance.Tools;
    // const Annotations = instance.Annotations;

    docViewer.on('documentLoaded', () => {
      // call methods relating to the loaded document

For more info on using WebViewer, see this guide

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.