The viewer object is an instance accessible from the main mupdfwv.MuPDFWebViewer instance as follows: 
const viewer = mupdf.viewer;
This assumes you have returned your instance name as mupdf from the initMuPDFWebViewer() promise!

​
viewer

The viewer object has the following methods:

​
setColor

setColor(config: {mainColor: string, subColor: string}) Sets the primary (mainColor) and secondary (subColor) for the viewer user-interface.
  • Arguments:
    • config – An object containing the “main” and “sub” colors as hexidecimal strings.
Config object:
  • Arguments:
    • mainColor – (required) string in format “#RRGGBB”.
    • subColor – (required) string in format “#RRGGBB”.
  • Returns: Promise.
Example 
mupdf.viewer.setColor({mainColor: "#00ff00", subColor: "#0000ff"});

​
setBackgroundColor

setBackgroundColor(config: {color: string}) Sets the background color behind the document page.
  • Arguments:
    • config – An object containing the color as a hexidecimal string.
Config object:
  • Arguments:
    • color – (required) string in format “#RRGGBB”.
  • Returns: Promise.
Example 
mupdf.viewer.setBackgroundColor({color: "#222222"});

​
setPageBorderColor

viewer.setPageBorderColor(config: {color: string}) Sets the border color around document page instances in the viewer.
  • Arguments:
    • config – An object containing the color as a hexidecimal string.
Config object:
  • Arguments:
    • color – (required) string in format “#RRGGBB”.
  • Returns: Promise.
Example 
viewer.setPageBorderColor({color: "#ff0000"});

​
setTheme

setTheme(config: {type: mupdf.refs.theme}) Sets the overall theme of the viewer UI.
  • Arguments:
    • config – An object containing the theme type.
Config object: Example 
mupdf.viewer.setTheme({type:mupdf.refs.theme.DARK_MODE});
setLogo(config: {url: string}) Sets the brand logo (maximum size: 100x24px). It displays the logo in the top center of the viewer.
  • Arguments:
    • config – An object containing a link to the logo image.
Config object:
  • Arguments:
    • url – (required) string.
  • Returns: Promise.
Example 
mupdf.viewer.setLogo({url: "/logo.png"});

​
toggleDialog

toggleDialog(config: { dialogType: mupdf.refs.dialog.type, visibility?: boolean }) Toggles, shows or hides the print or search dialog.
  • Arguments:
    • config – An object containing the dialog to show or hide.
Config object:
  • Arguments:
    • dialogType – (required) mupdf.refs.dialog.type.
    • visibility – (optional) boolean. Use to explicity show or hide instead of toggle.
  • Returns: Promise.
Example 
mupdf.viewer.toggleDialog({dialogType: mupdf.refs.dialog.type.PRINT, visibility:true});

​
getScale

getScale() Gets the current zoom scale.
  • Returns: Promise<{ scale: number; }>.
Example 
async function getScale() {
    return mupdf.viewer.getScale();
}

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

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

getScale().then(success, failure);

​
setScale

setScale(config: { scale: number }) Sets the current zoom scale.
  • Arguments:
    • config – Object containing the scale number.
Config object:
  • Arguments:
    • scale – (required) number.
  • Returns: Promise.
Example 
mupdf.viewer.setScale({scale:140});

​
zoomIn

viewer.zoomIn(config?: { increment?: number }) Zooms in on the document.
  • Arguments:
    • config – Object containing the increment number.
Config object:
  • Arguments:
    • increment – (optional) number.
  • Returns: Promise.
Example 
mupdf.viewer.zoomIn({increment:10});

​
zoomOut

viewer.zoomOut(config?: { decrement?: number }) Zooms out on the document.
  • Arguments:
    • config – Object containing the decrement number.
Config object:
  • Arguments:
    • decrement – (optional) number.
  • Returns: Promise.
Example 
mupdf.viewer.zoomOut({decrement:10});

​
getCurrentPageIndex

getCurrentPageIndex() Gets the current page index (zero-indexed).
  • Returns: Promise<{ currentPageIndex: number; }>.
Example 
async function getPageIndex() {
    return mupdf.viewer.getCurrentPageIndex();
}

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

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

getPageIndex().then(success, failure);

​
getRotation

getRotation() Gets the current document rotation angle in degrees.
  • Returns: Promise.
Example 
async function getRotation() {
    return mupdf.viewer.getRotation();
}

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

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

getRotation().then(success, failure);

​
setRotation

setRotation(config: { degree: mupdf.refs.degree }) Sets the document rotation angle in degrees.
  • Arguments:
    • config – Object containing rotation value.
Config object: Example 
mupdf.viewer.setRotation(mupdf.refs.degree.DEG_90)

​
rotateClockwise

rotateClockwise() Rotates clockwise.
  • Returns: Promise.
Example 
mupdf.viewer.rotateClockwise();

​
rotateCounterClockwise

rotateCounterClockwise() Rotates counter-clockwise.
  • Returns: Promise.
Example 
mupdf.viewer.rotateCounterClockwise();

​
setViewMode

setViewMode(config: { viewMode: mupdf.refs.viewMode }) Sets the view mode for the document.
  • Arguments:
    • config – Object containing the view mode.
Config object: Example 
mupdf.viewer.setViewMode({viewMode:mupdf.refs.viewMode.DOUBLE});

​
fitTo

fitTo(config: { to: mupdf.refs.fit.to }) Sets the page fitting.
  • Arguments:
    • config – Object containing the page fitting type.
Config object: Example 
mupdf.viewer.fitTo({to:mupdf.refs.fit.to.WIDTH});

​
scrollToNextPage

scrollToNextPage() Scrolls to the next page.
  • Returns: Promise.
Example 
mupdf.viewer.scrollToNextPage();

​
scrollToPreviousPage

scrollToPreviousPage() Scrolls to the previous page.
  • Returns: Promise.
Example 
mupdf.viewer.scrollToPreviousPage();

​
scrollTo

scrollTo(config: { type: mupdf.refs.scroll.type, value: number, centerPoint?: { x: number, y: number }, select?: boolean, name?: string, pageIndex?: number }) Scrolls to a specific position on a page or to an annotation.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • type – (required) mupdf.refs.scroll.type.
    • value – (required) Scroll value (PAGE: Page index, zero-indexed, ANNOTATION: Annotation id).
    • centerPoint – (optional) Center point of the page (only if type is mupdf.refs.scroll.type.PAGE).
    • select – (optional) Whether to select the annotation (only if type is mupdf.refs.scroll.type.ANNOTATION).
    • name – (optional) Annotation name (only if type is mupdf.refs.scroll.type.ANNOTATION).
    • pageIndex – (optional) Page index (only if type is mupdf.refs.scroll.type.ANNOTATION).
  • Returns: Promise.
Example 
// scroll to page 4 of the document
mupdf.viewer.scrollTo({type:mupdf.refs.scroll.type.PAGE, value:3});

​
openSideView

openSideView(config: { type: mupdf.refs.panel.open }) Opens a side view panel.
  • Arguments:
    • config – An object containing the side view panel to open.
Config object: Example 
mupdf.viewer.openSideView({type:mupdf.refs.panel.open.BOOKMARK})

​
closeSideView

closeSideView(config: { type: mupdf.refs.panel.close }) Closes a side view panel.
  • Arguments:
    • config – An object containing the side view panel to close.
Config object: Example 
mupdf.viewer.closeSideView({type: mupdf.refs.panel.close.RIGHT});

​
togglePanel

togglePanel(config: { type: mupdf.refs.panel.open }) Toggles a panel visibility.
  • Arguments:
    • config – An object containing the side view to toggle.
Config object: Example 
mupdf.viewer.togglePanel({type:mupdf.refs.panel.open.BOOKMARK});

​
highlight

highlight(config: { rects: Array<{ color: string; pageIndex: number; opacity?: number; rect: { top: number; left: number; bottom: number; right: number } }> }) Highlights text.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • rects – (required) Array of highlight area information.
    • color – (required) Highlight color.
    • pageIndex – (required) Page index.
    • opacity – (optional) Highlight opacity.
    • rect – (required) Highlight area.
  • Returns: Promise<mupdfwv.HighlightedRect[]>.
Example 
mupdf.viewer.highlight({rects:[{color:"#ff00ff", pageIndex:0, rect:{left:0,right:100,top:0, bottom:100}}]});

​
unhighlight

unhighlight(config:{ rects: { id: number }[] }) Removes highlights.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • rects – (required) Array of highlight area information.
  • Returns: Promise.
Example 
mupdf.viewer.unhighlight({rects:[{id:12}, {id:43}]});

​
searchText

searchText(config: { keyword: string; caseSensitive?: boolean; useRegex?: boolean; emitEvent?: boolean }) Searches for text. This will open up the search panel if it is not already opened and run the search.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • keyword – (required) Search keyword.
    • caseSensitive – (optional) Whether to be case sensitive.
    • useRegex – (optional) Whether to use regular expressions.
    • emitEvent – (optional) Whether to emit events.
  • Returns: Promise.
Example 
mupdf.viewer.searchText({keyword:"hello", caseSensitive:false})

​
setLanguage

setLanguage(config: { key: mupdf.refs.language }) Sets the language for the UI.
  • Arguments:
    • config – The configuration object.
Config object: 
mupdf.viewer.setLanguage({ key: mupdf.refs.language.ENGLISH });

​
getSize

getSize() Gets the viewer size.
  • Returns: Promise<{ width: number; height: number; }>.
Example 
async function getSize() {
    return mupdf.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);

​
setViewVisibility

setViewVisibility(config: { view: mupdf.refs.visibility.view, visibility: boolean }) Sets a view visibility.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • view – (required) mupdf.refs.visibility.view. mupdf.refs.visibility.view should be one of TOOLBAR | FLOATING_NAV | SIDE_VIEW | CONTEXT_MENU | INDICATOR.
    • visibility - (required) Boolean indicating visibility state.
  • Returns: Promise.
Refer to the Customization: Display/Hide UI Guide.

​
addButton

viewer.addButton(config: { buttons: Array<{ position: string, icon: mupdf.refs.icon, label: string, onclick: Function }> }) Adds button items to the toolbar.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • buttons – (required) Array of button information. buttons array objects:
      • Arguments:
        • position – (required) Button position, two options as string references: “TOOLBAR.LEFT_SECTION.FIRST” | “TOOLBAR.LEFT_SECTION.LAST”.
        • icon – (required) Button icon mupdf.refs.icon.
        • label – (required) Button label.
        • onclick – (required) Click handler function.
  • Returns: Promise.
Refer to the Customization: Add Buttons to Toolbar Guide.

​
addContextMenu

viewer.addContextMenu(config: { menus: Array<{ type: string, position: string, icon?: mupdf.refs.icon, label?: string, onclick?: Function }> }) Adds items to the context menu (this is the pop-up menu you see when you right click on a document).
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • menus – (required) Array of menu information. menus array objects:
      • Arguments:
        • type - (required) Menu type: “MENU”.
        • position – (required) Item position, two options as string references: “FIRST” | “LAST”.
        • icon – (optional) Item icon mupdf.refs.icon.
        • label – (optional) Item label.
        • onclick – (optional) Click handler function.
  • Returns: Promise.
Refer to the Customization: Add Context Menu Guide.

​
defineDocumentPanel

defineDocumentPanel(config: { items: Array<{ label: string, onclick: Function, icon?: refs.icon }> }) Defines document panel at the left side of the viewer toolbar. Config object:
  • Arguments:
    • items – (required) Array of menu information. items array objects:
      • Arguments:
        • label – (required) Item label.
        • onclick – (required) Click handler function.
        • icon – (optional) Item icon mupdf.refs.icon.
  • Returns: Promise.
Refer to the Customization: Define Document Panel Guide.

​
defineAnnotSelectMenu

viewer.defineAnnotSelectMenu(config: { html: string; style?: string; script?: string; tool?: mupdf.refs.annotation.tool}) Defines the popup menu when selecting or creating an annotation.
  • Arguments:
    • config – The configuration object.
Config object:
  • Arguments:
    • html – (required) HTML content of the menu.
    • style - (optional) CSS content of the menu.
    • script - (optional) JavaScript content of the menu.
    • tool - (optional) Annotation tool that the menu is displayed for (mupdf.refs.annotation.tool ‘HIGHLIGHT’ | ‘STRIKE’ | ‘UNDERLINE’ | …).
  • Returns: Promise.
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.
Refer to the Customization: Define Annotation Selection Menu Guide.

​
openContextMenu

openContextMenu() Opens the context menu.
  • Returns: Promise.
Refer to the Customization: Define When to Show the Context Menu Guide.