Some test text!

Hamburger Icon

Web / Guides / Styles

Customizing WebViewer UI Styles

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


  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));
.Button.Icon {
  color: red;
} {
  transition: all ease 0.5s;

Accessing DOM directly

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

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

Get the answers you need: Chat with us