Section:

Integrating TypeScript with WebViewer JavaScript PDF library

This guide will show you how to integrate WebViewer Document Viewer & Editor into a React application.

You can watch a step-by-step video to help you get started.

You can also download a ready-to-go sample on GitHub.

Apryse also provides a TypeScript declaration file automatically when you install WebViewer from npm. You can easily use it with your projects to reap the benefits of static type checking and autocomplete to improve the speed of your development process.

Prerequisites

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Get Started with the Sample

1. Clone the Sample

Clone the webviewer-typescript-sample repository:

sh

1git clone https://github.com/ApryseSDK/webviewer-typescript-sample.git

Enter the directory and run npm install:

sh

1cd webviewer-typescript-sample
2npm install

This will automatically download and extract the Apryse WebViewer Package and other dependencies.

Use the following command to watch for changes in .ts files present in the src folder. If you make changes, it will automatically recompile the index.ts file again to produce a matching index.js file which the browser will use.

sh

1npm run watch

You may get some errors regarding 'object' and 'Promise' types but they can be safely ignored. The watch command will occupy a process.

2. Run the Sample

Run the application by executing the following in a new shell service provider window (while the previous one is still running):

sh

1npm start

Your app should look like this:

Apryse Docs Image

Note: If your browser does not open automatically to open the WebViewer, navigate to localhost:3000 to see the project.

3. Usage

To call more WebViewer APIs, open index.ts in your favorite text editor and add the API calls to the callback for the WebViewer instantiation. Add your own license key in place of 'YOUR_LICENSE_KEY':

1WebViewer({
2    path: '../public/lib', // path to the Apryse 'lib' folder on your server
3    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
4    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
5    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
6  }, document.getElementById('viewer'))
7  .then(function(instance) {
8    const { Core, UI } = instance;
9    const { documentViewer, annotationManager, Annotations, Tools } = Core;
10  });

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following with the help of autocomplete and type intellisense in your IDE:

1instance.UI.setTheme('dark');

Execute npm start if it isn't already running, and the theme of the viewer will change. Refresh your browser page if the server is already running to see your changes.

Apryse Docs Image

Next step

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales