TypeScript icon, indicating that this package has built-in type declarations

8.12.0 • Public • Published


WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.

WebViewer UI


1) Install WebViewer

npm i @pdftron/webviewer --save

This will also download all the assets that need to be included for WebViewer to work.

2) Copy assets and resources to your public/static folder

These assets need to be served with your application. For example, if your project is built into a dist folder, you could copy these assets into dist/public.

The folder you need to copy is node_modules/@pdftron/webviewer/public.

cp -R ./node_modules/@pdftron/webviewer/public ./dist

We recommend using a module bundler like Webpack to automatically do this for you. There is a nice plugin called copy-webpack-plugin that does just this.

3) Import and instantiate WebViewer

import WebViewer from '@pdftron/webviewer'

const element = document.getElementById('viewer');

  path: '/public', // point to where the files you copied are served from
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf' // path to your document
}, element).then((instance) => {
  // Call APIs here


Full documentation for WebViewer can be found here.


WebViewer will run in trial mode until a license is provided. For more information on licensing, please visit our website.

Tip: Click on a version number to view a previous version's package page

Current Tags

Version History