This section explains how to get started when using a bundler, like webpack.

1. Install the @accusoft/pdf-viewer package:

   npm install @accusoft/pdf-viewer

2. To ensure the best experience on mobile devices, make sure your application defines a meta viewport tag in the head of your HTML, like this:

   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

   Without this, the viewer UI may appear very small and be unusable on a mobile device (if you are already developing a web application for mobile, you likely already have a tag like this defined).

3. Define an empty container DOM element where you want the PDF viewer to be located:

   <!-- NOTE: The viewer will only fill the size of your container.
        Make sure your container has a defined width and height! -->
   <div id="myContainer" style="height: 800px;"></div>

4. Import PdfViewerControl:

   import { PdfViewerControl } from '@accusoft/pdf-viewer';

5. Create a viewer:

   (async () => {
     // Create a viewer
     window.myViewer = await PdfViewerControl.create({
       container: document.getElementById('myContainer'),
   
       // URL or Uint8Array for a PDF
       sourceDocument: 'https://yourdomain.com/documents/example.pdf'
     });
   })();

   Optionally, use a licenseKey of 'eval' to evaluate Professional features, enabling the allowedControls you want, such as annotation tools:

   (async () => {
     // Create a viewer
     window.myViewer = await PdfViewerControl.create({
       container: document.getElementById('myContainer'),
   
       // URL or Uint8Array for a PDF
       sourceDocument: 'https://yourdomain.com/documents/example.pdf',
   
       // Evaluate Professional features (page contents will be watermarked)
       licenseKey: 'eval',
   
       // Configure the UI:
       allowedControls: {
         // Enable or disable annotation tools (all false by default):
         ellipseTool: true,
         freehandDrawingTool: true,
         freehandSignatureTool: true,
         lineTool: true,
         rectangleTool: true,
         textHighlightTool: true,
   
         // Enable or disable other parts of the UI (all true by default):
         fullScreenToggle: true,
         nextAndPreviousPageButtons: true,
         pageNumberAndCount: true,
         printing: true,
         search: true,
         thumbnails: true,
         zoomInAndOutButtons: true
       }
     });
   })();