Skip to main content

​
UI Customization

UI customization is useful for both branding the MuPDF WebViewer as well as adding or removing features.

​
Visual Customization

The following visual customization is possible: WebViewer Visual Customization

​
Set Primary and Secondary colors

This sets the primary and secondary colors - these reflect the button & text colors when these items are selected. See: viewer.setColor().

​
Set Background Color

Sets the background color behind the document page. See viewer.setBackgroundColor().

​
Set Page Border Color

Sets the page border color. See viewer.setPageBorderColor().

​
Set Theme

Sets the theme for light, dark or system mode. See viewer.setTheme(). Allows to set a logo in the top header area. See viewer.setLogo().

​
Functional Customization

Sometimes you may want to alter the functionality of the MuPDF WebViewer User Interface by showing or hiding elements or by editing components. The available customizations are possible:

​
Display/Hide UI

You can display/hide the UI elements using the viewer.setViewVisibility() function. For example, if you want to hide the toolbar, you can do the following: Example 
mupdf.viewer.setViewVisibility({
  view: mupdf.refs.visibility.view.TOOLBAR,
  visibility: false,
});

​
Add Buttons to Toolbar

You can add buttons to the toolbar using the viewer.addButton() function. For example, if you want to add a button to the toolbar to enter fullscreen, you can do the following: Example 
mupdf.viewer.addButton({
  buttons: [
    {
      position: 'TOOLBAR.LEFT_SECTION.FIRST',
      icon: mupdf.refs.icon.ENTER_FULLSCREEN,
      label: 'Enter fullscreen',
      onclick: () => {
        document.body.requestFullscreen();
      },
    },
  ],
});
Toolbar with fullscreen icon

​
Add Context Menu

You can add items to the context menu (the pop-up menu you see when you right click on a document in MuPDF WebViewer) using the viewer.addContextMenu() function. For example, if you want to add an item to rotate the page clockwise, you can do the following: Example 
mupdf.viewer.addContextMenu({
  menus: [
    {
      type: 'MENU',
      position: 'FIRST',
      icon: mupdf.refs.icon.ROTATE_CLOCKWISE,
      label: 'Rotate Clockwise',
      onclick: () => {
        mupdf.viewer.rotateClockwise();
      },
    },
  ],
});
Content menu with rotate icon

​
Define Document Panel

You can define the document panel using the viewer.defineDocumentPanel() function. For example, if you want to define the document panel to show the bookmark panel as “Table of Contents” and the annotation panel as “Markups” then you can do the following: Example 
mupdf.viewer.defineDocumentPanel({
    items: [
        {
        label: 'Table of Contents',
        icon: mupdf.refs.icon.BOOKMARK,
        onclick: () => {
            mupdf.viewer.togglePanel({
            type: mupdf.refs.panel.open.BOOKMARK,
            });
        },
        },
        {
        label: 'Markups',
        icon: mupdf.refs.icon.PENCIL,
        onclick: () => {
            mupdf.viewer.togglePanel({
            type: mupdf.refs.panel.open.ANNOTATION,
            });
        },
        },
    ],
});
”Bookmarks”, “Table of Contents” and “Outline” are all synonomous terms - we can’t guess which term you like most! 🙂
Customized Document Panel

​
Define Annotation Selection Menu

You can define the annotation selection menu using viewer.defineAnnotSelectMenu() function. For example, if you want to define the annotation selection menu when selecting a highlight annotation, you can do something like the following: Example 
let html = `<div id='my-container'>
<p>Testing custom HTML & CSS for Highlight tool</p>
<button onclick='helloWorld()'>Press me!</button>
</div>`;

let css = `#my-container 
{
width:200px;
height:200px;
background-color: #FF00ff;
color:#000;
font-size:12px;
margin:10px;
}`;

let js = `function helloWorld()
{
let myObj = document.getElementById('my-container');
myObj.innerHTML='Hello World!'
}`;

mupdf.viewer.defineAnnotSelectMenu({html:html,
                                    style:css,
                                    script:js,
                                    tool:mupdf.refs.annotation.tool.HIGHLIGHT})
Customized Annotaiton Popup Panel
Ensure to set dimensions and font sizes in your CSS and scope your content correctly. We recommend using your company namespacing for the HTML DOM objects, CSS references as well as JavaScript!

​
Define When to Show the Context Menu

Normally when viewing a document the user can right-click on the document to activate the quick shortcut context menu: WebViewer Context Menu with Annotation options But what if you’d like to show this menu as soon as a user selects text? In this case you would need to use an event listener which detects if text is indeed selected and then opens the context menu by using the viewer.openContextMenu() function. Example 
mupdf.addEventListener(mupdf.refs.event.type.TEXT_SELECTION_CHANGE, (e) => {
                
    function getSelectedText() {
        mupdf.text.getSelected().then(successCallbackGetText, failureCallbackGetText)
    }

    function successCallbackGetText(result) {
        if (result) {
            mupdf.viewer.openContextMenu();
        }
    }

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

    getSelectedText();
});

​
Define the Right Click Action

If required the behaviour for the right-click option can be overridden by using the viewer.defineRightClickAction() function. Example 
mupdf.viewer.defineRightClickAction({onclick:myFunc})

function myFunc() {
    alert("Your JS here!");
}
⌘I