> ## Documentation Index
> Fetch the complete documentation index at: https://webviewer-docs.mupdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewer API

The [`viewer`](#viewer) object is an instance accessible from the main [MuPDFWebViewer](/api-reference/introduction#initmupdfwebviewer) instance as follows:

```javascript theme={null}
const viewer = webViewer.viewer;
```

<Note>
  This assumes you have returned your instance name as `webViewer` from the [initMuPDFWebViewer()](/api-reference/introduction#initmupdfwebviewer) promise!
</Note>

## viewer

The `viewer` object has the following methods:

### toggleDialog

```typescript theme={null}
toggleDialog(config: { dialogType: DialogType; visibility?: boolean }): Promise<undefined>;
```

Toggles, shows or hides the print or search dialog.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the dialog to show or hide.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.dialogType" type="webViewer.refs.dialog.type" required>
    Dialog type. See [webViewer.refs.dialog.type](/api-reference/refs/index#dialog).
  </ParamField>

  <ParamField body="config.visibility" type="boolean">
    Use to explicitly show or hide instead of toggling.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.toggleDialog({dialogType: webViewer.refs.dialog.type.PRINT, visibility:true});
```

### getScale

```typescript theme={null}
getScale(): Promise<{ scale: number }>;
```

Gets the current zoom scale.

#### Returns

<ResponseField name="result" type="Promise<{ scale: number; }>" required>
  A Promise that resolves to the current zoom scale.
</ResponseField>

**Example**

```javascript theme={null}
async function getScale() {
    return webViewer.viewer.getScale();
}

function success(result) {
    console.log(`Scale is: ${result.scale}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getScale().then(success, failure);
```

### setScale

```typescript theme={null}
setScale(config: { scale: number }): Promise<undefined>;
```

Sets the current zoom scale.

#### Parameters

<ParamField body="config" type="object" required>
  Object containing the scale number.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.scale" type="number" required>
    Zoom scale.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setScale({scale:140});
```

### zoomIn

```typescript theme={null}
zoomIn(config?: { increment: number }): Promise<undefined>;
```

Zooms in on the document.

#### Parameters

<ParamField body="config" type="object">
  Optional configuration.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.increment" type="number" required>
    Increment amount. Required when `config` is provided.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.zoomIn({increment:10});
```

### zoomOut

```typescript theme={null}
zoomOut(config?: { decrement: number }): Promise<undefined>;
```

Zooms out on the document.

#### Parameters

<ParamField body="config" type="object">
  Optional configuration.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.decrement" type="number" required>
    Decrement amount. Required when `config` is provided.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.zoomOut({decrement:10});
```

### getCurrentPageIndex

```typescript theme={null}
getCurrentPageIndex(): Promise<{ currentPageIndex: number }>;
```

Gets the current page index (zero-indexed).

#### Returns

<ResponseField name="result" type="Promise<{ currentPageIndex: number; }>" required>
  A Promise that resolves to the current page index (zero-indexed).
</ResponseField>

**Example**

```javascript theme={null}
async function getPageIndex() {
    return webViewer.viewer.getCurrentPageIndex();
}

function success(result) {
    console.log(`Page index is: ${result.currentPageIndex}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getPageIndex().then(success, failure);
```

### getRotation

```typescript theme={null}
getRotation(): Promise<{ degree: 0 | 90 | 180 | 270 }>;
```

Gets the current document rotation angle in degrees.

#### Returns

<ResponseField name="result" type="Promise<{ degree: 0 | 90 | 180 | 270 }>" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
async function getRotation() {
    return webViewer.viewer.getRotation();
}

function success(result) {
    console.log(`Rotation is: ${result.degree}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getRotation().then(success, failure);
```

### setRotation

```typescript theme={null}
setRotation(config: { degree: 0 | 90 | 180 | 270 | 360 }): Promise<undefined>;
```

Sets the document rotation angle in degrees.

#### Parameters

<ParamField body="config" type="object" required>
  Object containing rotation value.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.degree" type="webViewer.refs.degree" required>
    Rotation degree. See [webViewer.refs.degree](/api-reference/refs/index#degree).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setRotation({ degree: webViewer.refs.degree.DEG_90 });
```

### rotateClockwise

```typescript theme={null}
rotateClockwise(): Promise<undefined>;
```

Rotates clockwise.

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.rotateClockwise();
```

### rotateCounterClockwise

```typescript theme={null}
rotateCounterClockwise(): Promise<undefined>;
```

Rotates counter-clockwise.

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.rotateCounterClockwise();
```

### setViewMode

```typescript theme={null}
setViewMode(config: { viewMode: ViewMode }): Promise<undefined>;
```

Sets the view mode for the document.

#### Parameters

<ParamField body="config" type="object" required>
  Object containing the view mode.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.viewMode" type="webViewer.refs.viewMode" required>
    View mode. See [webViewer.refs.viewMode](/api-reference/refs/index#viewmode).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setViewMode({viewMode:webViewer.refs.viewMode.DOUBLE});
```

### fitTo

```typescript theme={null}
fitTo(config: { to: FitMode }): Promise<undefined>;
```

Sets the page fitting.

#### Parameters

<ParamField body="config" type="object" required>
  Object containing the page fitting type.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.to" type="webViewer.refs.fit.to" required>
    Fit mode. See [webViewer.refs.fit.to](/api-reference/refs/index#fit).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.fitTo({to:webViewer.refs.fit.to.WIDTH});
```

### scrollTo

```typescript theme={null}
scrollTo(config: { type: ScrollType; value: number }): Promise<undefined>;
scrollTo(config: { type: 'PAGE'; value: number; centerPoint?: { x: number; y: number } }): Promise<undefined>;
scrollTo(config: { type: 'ANNOTATION'; value: number; select?: boolean }): Promise<undefined>;
scrollTo(config: { type: 'ANNOTATION'; name: string; pageIndex: number; select?: boolean }): Promise<undefined>;
```

Scrolls to a specific position on a page or to an annotation.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.type" type="webViewer.refs.scroll.type" required>
    Scroll type. See [webViewer.refs.scroll.type](/api-reference/refs/index#scroll).
  </ParamField>

  <ParamField body="config.value" type="number">
    Scroll value. Required for `{ type: 'PAGE' }` and `{ type: 'ANNOTATION', value: number }` overloads.
  </ParamField>

  <ParamField body="config.centerPoint" type="object">
    Center point of the page (`{ x: number, y: number }`). Only used when `type` is `webViewer.refs.scroll.type.PAGE`.
  </ParamField>

  <ParamField body="config.select" type="boolean">
    Whether to select the annotation. Only used when `type` is `webViewer.refs.scroll.type.ANNOTATION`.
  </ParamField>

  <ParamField body="config.name" type="string">
    Annotation name. Required for `{ type: 'ANNOTATION', name: string, pageIndex: number }`.
  </ParamField>

  <ParamField body="config.pageIndex" type="number">
    Page index. Required for `{ type: 'ANNOTATION', name: string, pageIndex: number }`.
  </ParamField>
</Expandable>

<Note>
  Use one of these overload shapes:

  * `{ type: 'PAGE', value: number, centerPoint?: { x: number; y: number } }`
  * `{ type: 'ANNOTATION', value: number, select?: boolean }`
  * `{ type: 'ANNOTATION', name: string, pageIndex: number, select?: boolean }`
</Note>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
// scroll to page 4 of the document
webViewer.viewer.scrollTo({type:webViewer.refs.scroll.type.PAGE, value:3});

```

### scrollToNextPage

```typescript theme={null}
scrollToNextPage(): Promise<undefined>;
```

Scrolls to the next page.

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.scrollToNextPage();
```

### scrollToPreviousPage

```typescript theme={null}
scrollToPreviousPage(): Promise<undefined>;
```

Scrolls to the previous page.

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.scrollToPreviousPage();
```

### selectAnnotationTool

```typescript theme={null}
selectAnnotationTool(config: AnnotationTool | AnnotationStampTool): Promise<undefined>;
```

Selects an annotation tool.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.tool" type="webViewer.refs.annotation.tool" required>
    Annotation tool. See [webViewer.refs.annotation.tool](/api-reference/refs/index#tool).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.selectAnnotationTool({tool:webViewer.refs.annotation.tool.HIGHLIGHT});
```

### toggleAnnotationTool

```typescript theme={null}
toggleAnnotationTool(config: AnnotationTool | AnnotationStampTool): Promise<undefined>;
```

Toggles an annotation tool.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.tool" type="webViewer.refs.annotation.tool" required>
    Annotation tool. See [webViewer.refs.annotation.tool](/api-reference/refs/index#tool).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.toggleAnnotationTool({tool:webViewer.refs.annotation.tool.HIGHLIGHT});
```

### openSideView

```typescript theme={null}
openSideView(config: { type: Panel }): Promise<undefined>;
```

Opens a side view panel.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the side view panel to open.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.type" type="webViewer.refs.panel.open" required>
    Panel type. See [webViewer.refs.panel.open](/api-reference/refs/index#panel).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.openSideView({type:webViewer.refs.panel.open.BOOKMARK})
```

### closeSideView

```typescript theme={null}
closeSideView(config: { type: PanelSide }): Promise<undefined>;
```

Closes a side view panel.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the side view panel to close.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.type" type="webViewer.refs.panel.close" required>
    Panel type. See [webViewer.refs.panel.close](/api-reference/refs/index#panel).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.closeSideView({type: webViewer.refs.panel.close.RIGHT});
```

### togglePanel

```typescript theme={null}
togglePanel(config: { type: Panel }): Promise<undefined>;
```

Toggles a panel visibility.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the side view to toggle.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.type" type="webViewer.refs.panel.open" required>
    Panel type. See [webViewer.refs.panel.open](/api-reference/refs/index#panel).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.togglePanel({type:webViewer.refs.panel.open.BOOKMARK});
```

### highlight

```typescript theme={null}
highlight(config: { rects: HighlightRect[] }): Promise<HighlightedRect[]>;
highlight(config: { keywords: HighlightKeyword[] }): Promise<HighlightedRect[]>;
```

Highlights text.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.rects" type="HighlightRect[]">
    Array of highlight region definitions.
  </ParamField>

  <ParamField body="config.keywords" type="HighlightKeyword[]">
    Array of keyword highlight definitions.
  </ParamField>
</Expandable>

<Expandable title="rects item properties">
  <ParamField body="config.rects[].color" type="string" required>
    Highlight color.
  </ParamField>

  <ParamField body="config.rects[].pageIndex" type="number" required>
    Page index.
  </ParamField>

  <ParamField body="config.rects[].opacity" type="number">
    Highlight opacity.
  </ParamField>

  <ParamField body="config.rects[].rect" type="object" required>
    Highlight area rect (`{ top: number; left: number; bottom: number; right: number }`).
  </ParamField>
</Expandable>

<Expandable title="keywords item properties">
  <ParamField body="config.keywords[].keyword" type="string" required>
    Keyword to search and highlight.
  </ParamField>

  <ParamField body="config.keywords[].color" type="string" required>
    Highlight color.
  </ParamField>

  <ParamField body="config.keywords[].opacity" type="number">
    Highlight opacity.
  </ParamField>

  <ParamField body="config.keywords[].caseSensitive" type="boolean">
    Whether to perform case-sensitive matching.
  </ParamField>

  <ParamField body="config.keywords[].useRegex" type="boolean">
    Whether to interpret `keyword` as a regular expression.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise<HighlightedRect[]>" required>
  A Promise that resolves to an array of highlighted rects.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.highlight({rects:[{color:"#ff00ff", pageIndex:0, rect:{left:0,right:100,top:0, bottom:100}}]});
```

### unhighlight

```typescript theme={null}
unhighlight(config: { rects: HighlightedRect[] }): Promise<undefined>;
unhighlight(config: { mode: 'all' }): Promise<undefined>;
```

Removes highlights.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object. Provide either `rects` or `mode`.
</ParamField>

<Expandable title="config options">
  <ParamField body="config.rects" type="HighlightedRect[]">
    Array of highlighted rect references to remove.
  </ParamField>

  <ParamField body="config.mode" type="'all'">
    Mode for unhighlighting (for example, `"all"` to remove all highlights).
  </ParamField>
</Expandable>

<Expandable title="HighlightedRect properties">
  <ParamField body="config.rects[].id" type="number" required>
    Highlighted rect id.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.unhighlight({rects:[{id:12}, {id:43}]});
```

```javascript theme={null}
webViewer.viewer.unhighlight({mode:"all"}); // removes all highlights
```

### searchText

```typescript theme={null}
searchText(config: {
  keyword: string;
  caseSensitive?: boolean;
  useRegex?: boolean;
  emitEvent?: boolean;
}): Promise<undefined>;
```

Searches for text. This will open up the search panel if it is not already opened and run the search.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.keyword" type="string" required>
    Search keyword.
  </ParamField>

  <ParamField body="config.caseSensitive" type="boolean">
    Whether to be case sensitive.
  </ParamField>

  <ParamField body="config.useRegex" type="boolean">
    Whether to use regular expressions.
  </ParamField>

  <ParamField body="config.emitEvent" type="boolean">
    Whether to emit events.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.searchText({keyword:"hello", caseSensitive:false})
```

### setViewVisibility

```typescript theme={null}
setViewVisibility(config: { view: HidableView; visibility: boolean }): Promise<undefined>;
```

Sets a view visibility.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.view" type="webViewer.refs.visibility.view" required>
    View reference. See [webViewer.refs.visibility.view](/api-reference/refs/index#view).
  </ParamField>

  <ParamField body="config.visibility" type="boolean" required>
    Boolean indicating visibility state.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Display/Hide UI Guide](/customization/index#display%2Fhide-ui).
</Tip>

### addButton

```typescript theme={null}
addButton(config: {
  buttons: {
    position: 'TOOLBAR.LEFT_SECTION.FIRST' | 'TOOLBAR.LEFT_SECTION.LAST' | 'TOOLBAR.RIGHT_SECTION.FIRST' | 'TOOLBAR.RIGHT_SECTION.LAST';
    icon: IconName;
    label: string;
    onclick: Function;
    title?: string;
  }[];
}): Promise<undefined>;
```

Adds button items to the toolbar.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.buttons" type="object[]" required>
    Array of button definitions.
  </ParamField>
</Expandable>

<Expandable title="buttons item properties">
  <ParamField body="config.buttons[].position" type="string" required>
    Button position: `"TOOLBAR.LEFT_SECTION.FIRST"` or `"TOOLBAR.LEFT_SECTION.LAST"` or `"TOOLBAR.RIGHT_SECTION.FIRST"` or `"TOOLBAR.RIGHT_SECTION.LAST"`.
  </ParamField>

  <ParamField body="config.buttons[].icon" type="webViewer.refs.icon" required>
    Button icon. See [webViewer.refs.icon](/api-reference/refs/index#icon).
  </ParamField>

  <ParamField body="config.buttons[].label" type="string" required>
    Button label (tooltip text on hover).
  </ParamField>

  <ParamField body="config.buttons[].onclick" type="Function" required>
    Click handler function.
  </ParamField>

  <ParamField body="config.buttons[].title" type="string">
    Button title (printed text next to the icon).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Add Buttons to Toolbar Guide](/customization/index#add-buttons-to-toolbar).
</Tip>

### openContextMenu

```typescript theme={null}
openContextMenu(): Promise<undefined>;
```

Opens the context menu.

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Define When to Show the Context Menu Guide](/customization/index#define-when-to-show-the-context-menu).
</Tip>

### addContextMenu

```typescript theme={null}
addContextMenu(config: {
  menus: {
    type: 'MENU';
    position: 'FIRST' | 'LAST';
    icon?: string;
    label?: string;
    onclick?: Function;
  }[];
}): Promise<undefined>;
```

Adds items to the context menu (this is the pop-up menu you see when you right click on a document).

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.menus" type="object[]" required>
    Array of menu definitions.
  </ParamField>
</Expandable>

<Expandable title="menus item properties">
  <ParamField body="config.menus[].type" type="string" required>
    Menu type: `"MENU"`.
  </ParamField>

  <ParamField body="config.menus[].position" type="string" required>
    Item position: `"FIRST"` or `"LAST"`.
  </ParamField>

  <ParamField body="config.menus[].icon" type="webViewer.refs.icon">
    Item icon. See [webViewer.refs.icon](/api-reference/refs/index#icon).
  </ParamField>

  <ParamField body="config.menus[].label" type="string">
    Item label.
  </ParamField>

  <ParamField body="config.menus[].onclick" type="Function">
    Click handler function.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Add Context Menu Guide](/customization/index#add-context-menu).
</Tip>

### defineDocumentPanel

```typescript theme={null}
defineDocumentPanel(config: {
  items: {
    label: string;
    onclick: Function;
    icon?: string;
  }[];
}): Promise<undefined>;
```

Defines document panel at the left side of the viewer toolbar.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.items" type="object[]" required>
    Array of panel item definitions.
  </ParamField>
</Expandable>

<Expandable title="items item properties">
  <ParamField body="config.items[].label" type="string" required>
    Item label.
  </ParamField>

  <ParamField body="config.items[].onclick" type="Function" required>
    Click handler function.
  </ParamField>

  <ParamField body="config.items[].icon" type="webViewer.refs.icon">
    Item icon. See [webViewer.refs.icon](/api-reference/refs/index#icon).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Define Document Panel Guide](/customization/index#define-document-panel).
</Tip>

### defineTextSelectionMenu

```typescript theme={null}
defineTextSelectionMenu(config: {
  menus: {
    label: string;
    onclick: Function;
    icon?: IconName;
  };
}): Promise<undefined>;
```

Defines the popup menu when selecting text

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.menus" type="object" required>
    Menu item definition.
  </ParamField>
</Expandable>

<Expandable title="menus properties">
  <ParamField body="config.menus.label" type="string" required>
    Menu label.
  </ParamField>

  <ParamField body="config.menus.onclick" type="Function" required>
    Click handler.
  </ParamField>

  <ParamField body="config.menus.icon" type="webViewer.refs.icon">
    Menu icon. See [webViewer.refs.icon](/api-reference/refs/index#icon).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Tip>
  Refer to the [Customization: Define Text Selection Menu Guide](/customization/index#define-text-selection-menu).
</Tip>

### defineAnnotSelectMenu

```typescript theme={null}
defineAnnotSelectMenu(config: {
  html: string;
  style?: string;
  script?: string;
  tool?: AnnotType;
}): Promise<undefined>;
```

Defines the popup menu when selecting or creating an annotation.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.html" type="string" required>
    HTML content of the menu.
  </ParamField>

  <ParamField body="config.style" type="string">
    CSS content of the menu.
  </ParamField>

  <ParamField body="config.script" type="string">
    JavaScript content of the menu.
  </ParamField>

  <ParamField body="config.tool" type="webViewer.refs.annotation.tool">
    Annotation tool that the menu is displayed for (see [webViewer.refs.annotation.tool](/api-reference/refs/index#tool)).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

<Warning>
  When using `style` or `script`, please consider the following

  * `style`: CSS selectors will apply to all matching elements within the viewer scope.
  * `script`: JavaScript code will be executed in the viewer's context with the following limitations:
    * External resources cannot be accessed.
    * Variables declared will be in global scope.
</Warning>

<Tip>
  Refer to the [Customization: Define Annotation Selection Menu Guide](/customization/index#define-annotation-selection-menu).
</Tip>

### defineRightClickAction

```typescript theme={null}
defineRightClickAction(config: { onclick: Function }): Promise<undefined>;
```

Defines a right-click action on the content area.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.onclick" type="Function" required>
    Click handler function.
  </ParamField>
</Expandable>

### setBackgroundColor

```typescript theme={null}
setBackgroundColor(config: { color: string }): Promise<undefined>;
```

Sets the background color behind the document page.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the color as a hexadecimal string.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.color" type="string" required>
    Color in format `#RRGGBB`.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setBackgroundColor({color: "#222222"});
```

### setPageBorderColor

```typescript theme={null}
setPageBorderColor(config: { color: string }): Promise<undefined>;
```

Sets the border color around document page instances in the viewer.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the color as a hexadecimal string.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.color" type="string" required>
    Color in format `#RRGGBB`.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
viewer.setPageBorderColor({color: "#ff0000"});
```

### setColor

```typescript theme={null}
setColor(config: { mainColor: string; subColor: string }): Promise<undefined>;
```

Sets the primary (`mainColor`) and secondary (`subColor`) for the viewer user-interface.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the `mainColor` and `subColor` hex color strings.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.mainColor" type="string" required>
    Primary color in format `#RRGGBB`.
  </ParamField>

  <ParamField body="config.subColor" type="string" required>
    Secondary color in format `#RRGGBB`.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setColor({mainColor: "#00ff00", subColor: "#0000ff"});
```

### setTheme

```typescript theme={null}
setTheme(config: { type: Theme }): Promise<undefined>;
```

Sets the overall theme of the viewer UI.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing the theme type.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.type" type="webViewer.refs.theme" required>
    Theme type. See [webViewer.refs.theme](/api-reference/refs/index#theme).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setTheme({type:webViewer.refs.theme.DARK_MODE});
```

### setLanguage

```typescript theme={null}
setLanguage(config: { key: Language }): Promise<undefined>;
```

Sets the language for the UI.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.key" type="webViewer.refs.language" required>
    Language key. See [webViewer.refs.language](/api-reference/refs/index#language).
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

```javascript theme={null}
webViewer.viewer.setLanguage({ key: webViewer.refs.language.ENGLISH });
```

### getSize

```typescript theme={null}
getSize(): Promise<TSize>;
```

Gets the viewer size.

#### Returns

<ResponseField name="result" type="Promise<{ width: number; height: number; }>" required>
  A Promise that resolves to the viewer size.
</ResponseField>

**Example**

```javascript theme={null}
async function getSize() {
    return webViewer.viewer.getSize();
}

function success(result) {
    console.log(`Size is: ${result.width}x${result.height}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getSize().then(success, failure);
```

### setLogo

```typescript theme={null}
setLogo(config: { url: string }): Promise<undefined>;
```

Sets the brand logo (maximum size: 100x24px). It displays the logo in the top center of the viewer.

#### Parameters

<ParamField body="config" type="object" required>
  An object containing a link to the logo image.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.url" type="string" required>
    Logo image URL.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.viewer.setLogo({url: "/logo.png"});
```

## Supporting Types

These types are used by the `viewer` APIs on this page.

### AnnotationTool

```typescript theme={null}
export interface AnnotationTool {
  tool: AnnotType;
  annotation?: {
    opacity?: number;
    strokeColor?: string;
    strokeWidth?: number;
    fillColor?: string;
    strokeDashPattern?: number[];
    startPointStyle?: LineEnd;
    endPointStyle?: LineEnd;
    fontColor?: string;
    fontFamily?: string;
    fontSize?: number;
  };
}
```

### AnnotationStampTool

```typescript theme={null}
export interface AnnotationStampTool {
  tool: AnnotType;
  width?: number;
  height?: number;
}
```

### HighlightRect

```typescript theme={null}
export interface HighlightRect {
  color: string;
  pageIndex: number;
  opacity?: number;
  rect: TRect;
}
```

### HighlightKeyword

```typescript theme={null}
export interface HighlightKeyword {
  keyword: string;
  color: string;
  opacity?: number;
  caseSensitive?: boolean;
  useRegex?: boolean;
}
```

### HighlightedRect

```typescript theme={null}
export interface HighlightedRect {
  id: number;
}
```