View Mode

View mode disables UI elements that perform editing actions on the document, while preserving navigation, search, and other read-only features. It applies whether your Modular UI is built from a JSON config, APIs, or both.

View-only for Modular UI

This view-only mode applies to the Modular UI. For the legacy UI, use its dedicated APIs. See the Read-only guide for details.

The DOCX Editor and Spreadsheet Editor expose their own options for controlling viewing vs. editing inside those editors. See these guides for details: DOCX Editor Initial Edit Mode and Spreadsheet Editor View Mode.

How it works

To enable and disable the view-only mode for Modular UI, use the following APIs:

JavaScript

// Enabling view-only mode.
instance.UI.enableViewOnlyMode();

// Disabling view-only mode.
instance.UI.disableViewOnlyMode();

UI.enableViewOnlyMode UI.disableViewOnlyMode

When view-only mode is enabled, the UI components are filtered through a white list of elements that remain available. Everything else is hidden/disabled automatically.

Default UI with view-only mode enabled

Default white list

There is a default white list covering allowed panels, tool buttons, preset buttons, and modals in view-only mode. If an allowed panel contains any controls that would edit the document, those controls are automatically hidden or disabled while the panel itself remains visible.

The default white list includes:

• Panels: Signature, Change List, Search, Notes Outlines, Bookmarks, Thumbnails, and Tabs panels.
• Tool buttons: Edit, Pan, Text Select, Content Select (for Docx Editor).
• Preset Buttons: Compare, Download, File Picker, Fullscreen, Print, Save As, Settings, and Toggle Accessibility Mode buttons.
• Modals: Color picker, Custom, Error, Filter, Loading, Open File, Password, Print, Progress, Save, Settings, Signature Validation, and Warning.

Customize the View Only White List

There are APIs to handle the view-only white list. The white list is composed of the data-element IDs of the components. This guide shows how to find the data-element of the UI elements.

Add elements to white list

Add elements to the view-only white list, making them visible/interactive in view-only mode.

JavaScript

// Keep the View toolbar group available in view-only mode.
instance.UI.addToViewOnlyWhitelist(['toolbarGroup-View']);

Adding panels to white list

To add panels to the view-only white list, the namespace containing all the identifiers for the prebuilt panels can be found at instance.UI.Panels.

Remove elements from white list

Remove elements from the white list, making them hidden/disabled in view-only mode.

JavaScript

instance.UI.removeFromViewOnlyWhitelist(['toolbarGroup-View']);

Return elements in white list

Return elements in the white list that you’ve added (does not include the default white list).

JavaScript

const customWhiteList = instance.UI.getViewOnlyWhitelist();
console.log('Custom white list:', customWhiteList);

Replace elements of the white list

Update the view-only whitelist, making the elements in the whitelist visible and usable in view-only mode.

JavaScript

// Replace whatever was added before; now only these will be in the custom white list
instance.UI.updateViewOnlyWhitelist([
  'toolbarGroup-View',
  'rectangleToolButton',
  'toolbarGroup-Annotate',
]);

Interaction with Annotation Permissions

View-only mode affects the UI only, disabling buttons, ribbons, panels, and hot keys that perform editing actions, and it does not change annotation permissions. To block creating, editing, deleting, or replying to annotations, you can check the Annotation Manager enableReadOnlyMode() API. You can check more details about it at Annotation Permissions in JavaScript PDF Viewer.

Shortcuts in View-Only

In view-only mode, keyboard shortcuts continue to work for actions that don’t modify the document, while any shortcut that would edit content is blocked. If you customized key mappings while in edit mode, those mappings are honored in view-only mode. Previously disabled shortcuts remain disabled, and the keyboard shortcuts panel in Settings shows only the view-only subset with editing controls disabled.

Customize view-only shortcuts

Set allowed shortcuts

Set which shortcuts are allowed to work in view-only mode.

JavaScript

instance.UI.updateViewOnlyShortcuts([instance.UI.Shortcuts.RECTANGLE]);

Fetch current shortcuts

Returns the current shortcut whitelist for view-only mode.

JavaScript

const shortcuts = instance.UI.getViewOnlyShortcuts();
console.log(shortcuts);