Customize WebViewer JavaScript PDF Viewer UI Styles: Buttons, Panels, and Modals

WebViewer UI supports style customizations using an API, through a CSS file or using the Modular UI.

Modular WebViewer UI

See this guide for more information about styling WebViewer with Modular UI.

Changing color theme

See this guide for more information about changing the theme.

Changing CSS properties

If you want to change more CSS properties, you can use a custom stylesheet to define them using normal CSS selectors.

To make the customization easier and consistent, WebViewer UI provides 5 top level classes:

• Button
• Panel
• Overlay
• Popup
• Modal

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));

CSS

.Button.Icon {
  color: red;
}

.Panel.open {
  transition: all ease 0.5s;
}

Accessing DOM directly

In WebViewer 11.0 and later, Web Components with the Modular UI is the default. However, WebViewer can still be loaded using an iframe, if desired. In versions prior to 11.0, the iframe-based implementation was the default.

Direct DOM access is supported in both approaches, but the method for accessing the DOM depends on which mode you use. Select either the Web Components tab or the iframe tab below based on your setup. The Web Component vs Iframe article provides more detail about the differences.

Avoid Direct DOM Manipulation

While it is technically possible to access the iframe or Web Component DOM and modify UI elements using querySelector, this approach is strongly discouraged.

WebViewer's internal DOM structure is not part of the public API and may change between releases. Direct DOM manipulation can easily break when upgrading WebViewer, even between minor versions. We recommend using the provided APIs and configuration options instead, which are designed to be stable, supported, and forward-compatible.

Web Components

WebViewer's UI will be loaded inside a modular UI.

WebViewer({
  // ...
}).then(instance => {
  const root = document.querySelector('apryse-webviewer').shadowRoot; 
  const topHeader = root.querySelector('[data-element="default-top-header"]');
});

Iframe

WebViewer's UI will be loaded inside an iframe, so to access the UI DOM elements you can use the iframeWindow property.

WebViewer({
  // ...
}).then(instance => {
  const iframeDoc = instance.UI.iframeWindow.document;
  const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');
});

Applying the :host CSS selector with WebViewer WebComponent

When using an external CSS file in WebViewer with a WebComponent and styling a custom modal panel or an existing panel, you should utilize the :host CSS pseudo-class selector.

The :host CSS pseudo-class targets the shadow host of the shadow DOM where the CSS is applied, enabling you to select the WebViewer WebComponent element.

Here’s an example of how this is used.

JavaScript

WebViewer.WebCompnent({
  css: 'path/main.css'
}).then(instance => {
  // ...
});

And here is the content of our main.css file.

CSS

.DocumentContainer {
    background: tomato;
}

:host {
    --icon-color: #00a5e4 !important;
}

WebViewer with new background color and changed icon color