PDFTron is now Apryse. Same great products, new name.

WebViewer 4.0 - Hello React, Goodbye jQuery

By Matt Parizeau | 2018 Oct 12

Sanity Image

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

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
// enable file picker
// add company’s logo in the header
viewerInstance.setHeaderItems((header) => {
  const myLogo = { … };
// change theme
  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

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

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.

Blog image

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.

Sanity Image

Matt Parizeau

Share this post