> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/ui-customization/view-mode.md).
# 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.
{% hint style="info" %}
**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](/web/annotation/annotationmanager/permissions.md#readonly-mode) 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](/web/docx-editor/docx-editor-initial-edit-mode.md) and [Spreadsheet Editor View Mode](/web/spreadsheet-editor/view-mode.md).
{% endhint %}
## How it works
To enable and disable the view-only mode for Modular UI, use the following APIs:
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
// Enabling view-only mode.
instance.UI.enableViewOnlyMode();
// Disabling view-only mode.
instance.UI.disableViewOnlyMode();
```
{% endcode %}
{% endtab %}
{% endtabs %}
[UI.enableViewOnlyMode](https://sdk.apryse.com/api/web/UI.html#.enableViewOnlyMode__anchor) [UI.disableViewOnlyMode](https://sdk.apryse.com/api/web/UI.html#.disableViewOnlyMode__anchor)
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](/web/ui-customization/hiding-elements.md#finding-dataelement-attribute-values) 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.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
// Keep the View toolbar group available in view-only mode.
instance.UI.addToViewOnlyWhitelist(['toolbarGroup-View']);
```
{% endcode %}
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**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](https://sdk.apryse.com/api/web/UI.html#.Panels__anchor).
{% endhint %}
### Remove elements from white list
Remove elements from the white list, making them hidden/disabled in view-only mode.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
instance.UI.removeFromViewOnlyWhitelist(['toolbarGroup-View']);
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Return elements in white list
Return elements in the white list that you’ve added (does not include the default white list).
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
const customWhiteList = instance.UI.getViewOnlyWhitelist();
console.log('Custom white list:', customWhiteList);
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Replace elements of the white list
Update the view-only whitelist, making the elements in the whitelist visible and usable in view-only mode.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
// Replace whatever was added before; now only these will be in the custom white list
instance.UI.updateViewOnlyWhitelist([
'toolbarGroup-View',
'rectangleToolButton',
'toolbarGroup-Annotate',
]);
```
{% endcode %}
{% endtab %}
{% endtabs %}
## 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](http://docs.apryse.com/web/guides/annotation/annotationmanager/permissions#readonly-mode.).
## 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.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
instance.UI.updateViewOnlyShortcuts([instance.UI.Shortcuts.RECTANGLE]);
```
{% endcode %}
{% endtab %}
{% endtabs %}
#### Fetch current shortcuts
Returns the current shortcut whitelist for view-only mode.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
const shortcuts = instance.UI.getViewOnlyShortcuts();
console.log(shortcuts);
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/ui-customization/view-mode.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
