WebViewer 4.0 - Hello React, Goodbye jQuery

By Matt Parizeau | 2018 Oct 12

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.

WebViewer UI v1.0

Copied to clipboard

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.

No more jQuery

Copied to clipboard

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() {
  ...
});

Custom annotation appearances

Copied to clipboard

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.