Free trial

Pick a framework to get started

close

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Hiding/Showing DOM elements in WebViewer UI

Hiding DOM elements is an essential aspect of a customizable UI. PDF.js Express Web Viewer UI supports hiding/showing elements both initially and dynamically.

Find data-element attribute values

To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

Left panel data element

we can find that it has a data-element value of leftPanel. Now we can use that value to hide/show it.

Constructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  disabledElements: [
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, document.getElementById('viewer'));

Enabling/disabling elements programmatically

To enable/disable the DOM elements, you can use the following APIs:

Example

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // remove left panel and left panel button from the DOM
  instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  // re-enable left panel and left panel button from the DOM
  instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

Relevant APIs

To hide/show the DOM elements on the fly, you can use the following APIs:

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM.

Opening/closing elements programmatically

You can toggle panels, overlays, popups, and modals.

Example

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // opens (shows) text popup and annotation popup in the UI
  instance.openElements([ 'menuOverlay', 'leftPanel' ]);
  // closes (hides) text popup and left panel in the UI
  instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

List of elements

Header

  • header
    • leftPanelButton
    • viewControlsButton
    • panToolButton
    • selectToolButton
    • fitButton
    • zoomOutButton
    • zoomInButton
    • freeHandToolGroupButton
      • freeHandToolButton
      • freeHandToolButton2
      • freeHandToolButton3
      • freeHandToolButton4
    • textToolGroupButton
      • highlightToolButton
      • highlightToolButton2
      • highlightToolButton3
      • highlightToolButton4
      • underlineToolButton
      • squigglyToolButton
      • strikeoutToolButton
    • shapeToolGroupButton
      • rectangleToolButton
      • ellipseToolButton
      • lineToolButton
      • arrowToolButton
      • polylineToolButton
      • polygonToolButton
      • cloudToolButton
    • eraserToolButton
    • signatureToolGroupButton
    • freeTextToolButton
    • stickyToolButton
    • miscToolGroupButton
      • calloutToolButton
      • stampToolGroupButton
      • rubberStampToolGroupButton
      • fileAttachmentToolGroupButton
      • cropToolButton
    • toolsButton
    • searchButton
    • menuButton

Panels

  • leftPanel
    • notesPanelButton
    • notesPanel
    • thumbnailsPanelButton
    • thumbnailsPanel
    • thumbnailControl
    • documentControl
  • outlinesPanelButton
  • outlinesPanel
  • layersPanelButton
  • layersPanel
  • bookmarksPanelButton
  • bookmarksPanel
  • searchPanel

Overlays

  • viewControlsOverlay
    • defaultPageTransitionButton
    • continuousPageTransitionButton
    • singleLayoutButton
    • doubleLayoutButton
    • coverLayoutButton
    • rotateCounterClockwiseButton
    • rotateClockwiseButton
  • menuOverlay
    • filePickerButton
    • fullScreenButton
    • downloadButton
    • printButton
  • pageNavOverlay
  • toolsOverlay
  • searchOverlay

Popups

  • annotationPopup
    • annotationCommentButton
    • annotationStyleEditButton
    • annotationDeleteButton
    • annotationCropButton
    • annotationRedactButton
    • annotationGroupButton
    • annotationUngroupButton
    • calibrateButton
    • linkButton
    • fileAttachmentDownload
  • annotationStylePopup
  • toolStylePopup
  • stylePopup
  • textPopup
    • copyTextButton
    • textHighlightToolButton
    • textUnderlineToolButton
    • textSquigglyToolButton
    • textStrikeoutToolButton
  • contextMenuPopup
    • panToolButton
    • stickyToolButton
    • highlightToolButton
    • freeHandToolButton
    • freeTextToolButton

Annotation note connector line

  • annotationNoteConnectorLine

Modals

  • signatureModal
    • signatureModalCloseButton
    • signatureModalClearButton
    • signatureModalSignButton
    • inkSignaturePanelButton
    • textSignaturePanelButton
    • imageSignaturePanelButton
  • printModal
  • loadingModal
  • errorModal
  • passwordModal