Frameworks
Integrations
Mendix
SharePoint
Default UI
Modular UI
AnnotationManager
Annotation Types
Customize
Version 11
v11.0
Version 10
v10.12
v10.11
v10.10
v10.9
v10.8
v10.7
v10.6
v10.5
v10.4
v10.3
v10.2
v10.1
v10.0
Version 8
v8.12
v8.11
v8.10
v8.9
v8.8
v8.7
v8.6
v8.5
v8.4
v8.3
v8.2
v8.1
v8.0
Version 7
Version 6
v6.3
v6.2
v6.1
v6.0
Version 5
Version 4
Version 3
Version 2
WebViewer Server
WebViewer BIM
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.
This is all that is required to load the core library. You do not need to call the WebViewer constructor to load the core library.
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.
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:
You can now create an instance of the DocumentViewer class, and provide it the two containers using the following APIs:
To load a document, we can now call the docViewer.loadDocument
API and pass in a file path or a blob.
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:
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.
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.
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:
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.
Did you find this helpful?
Trial setup questions?
Ask experts on DiscordNeed other help?
Contact SupportPricing or product questions?
Contact Sales