The latest version of WebViewer has just been released! We've completed the first version of WebViewer UI and added lots of new APIs for easy customizations. We also removed the requirement for jQuery and added support for custom annotation appearances for more accurate rendering.

See WebViewer changelog for details, and Migrating to v4 for managing breaking changes.

linkWebViewer UI v1.0

Built in React, the WebViewer UI takes the user/developer experience to a new level with:

  • Modern UI
  • Simple but powerful UX
  • 4 presets for commonly-used tools
  • Responsive design
  • APIs to tweak the UI and features on the fly
  • Public git repo (open-sourced)

The main goal of the new UI was to come up with UI/UX that’s easy to use out-of-box, yet can be customized easily on the fly. For example,

// disable sticky note tool
viewerInstance.disableTool(‘AnnotationCreateSticky’);
// enable file picker
viewerInstance.enableFilePicker();
// add company’s logo in the header
viewerInstance.setHeaderItems((header) => {
  const myLogo = {};
  header.shift(myLogo);
});
// change theme
viewerInstance.setTheme({
  primary: '#2C2B3A',
  secondary: '#4D4C5F',
  border: '#555555',
  buttonHover: '#686880',
  buttonActive: '#686880',
  text: '#FFFFFF',
  icon: '#FFFFFF',
  iconActive: '#FFFFFF'
});

See Introducing an Open Source WebViewer UI for more information, and APIs for available APIs.

linkNo more jQuery

jQuery is no longer required to be imported. jQuery used to be a great tool for DOM manipulations and handling cross browser inconsistencies, but it is bulky and can decrease performance. Now that browser APIs are consistent and widely supported and we have the UI built in React, we have removed jQuery from webviewer.js.

<!-- Version 3.x and older -->
<script src='lib/html5/external/jquery-3.2.1.min.js'></script>

<!-- Version 4.0 and after -->
<!-- nothing! -->
// Version 3.x and older
$(viewerElement).on('documentLoaded', function() {
  ...
});

// Version 4.0 and after
viewerElement.addEventListener('documentLoaded', function() {
  ...
});

linkCustom annotation appearances

All annotations have properties that define how they should be rendered, for example their bounding rectangle, fill and stroke colors, etc. Annotations can also have a custom appearance specified along with this information that may look different than how it would otherwise be rendered.

Below is an example of an annotation with a custom appearance on the left and without on the right:

WebViewer now supports annotation appearances for all markup annotations and button widgets, making rendering even more accurate.

For all the changes see WebViewer 4.0 changelog.