Building your own UI

If you do not want to use the default WebViewer UI and you want to build your own UI, you can do so by interacting with the "Core" library.

The core library is the engine that the WebViewer UI interacts with. This library can be loaded independently of the WebViewer UI, allowing you to build your own UI by using the APIs that the core library exposes.

If you want to load just the core library, you can do so by including a script tag that references the webviewer-core.min.js file included in the WebViewer package.

1<script src="/webviewer/core/webviewer-core.min.js"></script>

Loading this file will expose the Core namespace to the window (accessible via window.Core). This namespace contains all the APIs you need to build your own UI.

The core library has several other dependencies that it needs to load, including other JS files and WASM files. You must tell the core library where to find these files. To do so, you can call the setWorkerPath function at the beginning of your application. This function accepts a path that should point to the core folder in the WebViewer package.

1Core.setWorkerPath('/path/to/core/');

The Core namespace exposes a DocumentViewer class, which is the class that manages the rendering of documents to the DOM. This class requires you to set the DOM elements that you want the document to be rendered to.

In your HTML, you need to create two divs. The first div, called the "Scroll view", is the outermost container that will house the viewer. If the document you load exceeds the height of this container, the container will become scrollable.

The second div is the "Viewer element". This div is used to render the actual document to. The viewer element must be nested in the scroll view element.

Below is an example of what the HTML structure could look like:

1<div id='scroll-view' style='max-height: 600px; height: 600px; width: 100%;'>
2	<div id='viewer-element'></div>
3</div>

You can now create an instance of the DocumentViewer class, and provide it the two containers using the following APIs:

1const docViewer = new Core.DocumentViewer();  
2docViewer.setScrollViewElement(document.getElementById('scroll-view'));  
3docViewer.setViewerElement(document.getElementById('viewer'));

To load a document, we can now call the docViewer.loadDocument API and pass in a file path or a blob.

1docViewer.loadDocument('/path/to/document.pdf');

Once you have the core library configured and rendering a document, we can start to interact with the document by using more of the exposed APIs.

This process will typically involve you building out your own UI elements, and calling Core apis when those elements are clicked.

For example, you may want to add zoom controls to your UI. You could do this by adding a "Zoom in" and "Zoom out" button, and calling docViewer.zoomTo when either of them are clicked.

That might look something like this:

1const docViewer = new Core.DocumentViewer();  
2// Assuming we have a button with the ID "zoom-in-button"
3document.getElementById('zoom-in-button').addEventListener('click', () => {  
4	docViewer.zoomTo(docViewer.getZoom() + 0.25);  
5});
6// Assuming we have a button with the ID "zoom-out-button"
7document.getElementById('zoom-out-button').addEventListener('click', () => {  
8	docViewer.zoomTo(docViewer.getZoom() - 0.25);  
9});

The process for other custom UI elements is the same, no matter what functionality you are looking to build.

There are many different APIs to interact with on the Core and DocumentViewer namespaces, which are all documented in our API Documentation.

The process for building out an annotation UI is similar to building out other UI elements (as mentioned in the above section).

This will involve you setting up your UI, binding events to the UI elements, and calling Core APIs when buttons are pressed.

The easiest way to get started is to switch between different annotation tools when buttons are pressed or when certain events are fired.

The default tool for interacting with documents and annotations is called the AnnotationEdit tool. This tool lets you select text and edit annotations. Typically, you want this tool to be set by default when your UI is loaded. You can do that by calling docViewer.setToolMode after a document is loaded.

1const docViewer = new Core.DocumentViewer();
2docViewer.addEventListener('documentLoaded', () => {  
3	// enable default tool for text and annotation selection  
4	docViewer.setToolMode(docViewer.getTool('AnnotationEdit'));  
5});

We can also switch to other annotation tools by passing in different tool names to the getTool function used above. A full list of tools is available here.

For example, we could add a button that switches to the rectangle tool, which will allow the user to draw rectangle annotations on the document.

1const docViewer = new Core.DocumentViewer();
2// Assuming a button with the ID "create-rectangle" exists
3document.getElementById('create-rectangle').addEventListener('click', () => {  
4	docViewer.setToolMode(docViewer.getTool('AnnotationCreateRectangle'));  
5});
6

You can change the color, stroke width, and many other properties of the annotations by using the setStyles APIs.

For example, we could change the rectangle annotation to be red instead of black like so:

1const docViewer = new Core.DocumentViewer();
2// Assuming a button with the ID "create-rectangle" exists
3document.getElementById('create-rectangle').addEventListener('click', () => {  
4	const tool = docViewer.getTool('AnnotationCreateRectangle')
5	tool.setStyles({
6		StrokeColor: new Core.Annotations.Color(255,0,0)
7	})
8	docViewer.setToolMode(tool);  
9});

All the different styles that can be applied are documented here. Each tool has different styles that can be applied, so make sure to reference the correct documentation for the tool you are editing.

You can find the core namespace reference in our API documentation. Here you can explore all the different classes and APIs available to help you build out your own UI. You can also reference other guides and code snippets throughout the WebViewer documentation. Many of these code snippets will reference instance.Core (returned by the WebViewer constructor), but you can edit these snippets to work for your own UI by just using the global Core namespace.

We also have a sample repository showing how to start building a custom UI using react.

You can also reference our open source WebViewer UI repo which uses all the same concepts as this guide.