> 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.md). # UI customization - [Customizing WebViewer UI](https://docs.apryse.com/web/ui-customization/ui-customization.md): Elevate user experience with custom WebViewer UI configurations. Explore APIs to tailor document interactions using web. Optimize UI design efficiently. The Apryse Web SDK streamlines secure, serverle - [Modular UI](https://docs.apryse.com/web/ui-customization/modular-ui.md) - [Get Started with WebViewer Modular UI](https://docs.apryse.com/web/ui-customization/modular-ui/getting-started.md): Enhance your WebViewer UI with WebViewer Modular UI. Customize or create a new UI using modular components like Containers and Items for a tailored user experience. Get started with ease by adding the - [Containers](https://docs.apryse.com/web/ui-customization/modular-ui/containers.md): Discover how containers organize UI components efficiently. Learn about Modular Headers, Grouped Items, and Ribbon Groups for creating complex layouts. Optimize your UI with nested containers and enha - [Customize Modular UI Items](https://docs.apryse.com/web/ui-customization/modular-ui/items.md): Learn about Items in WebViewer Modular UI. Discover how these components like buttons and controls can be customized and placed in containers for easy management and reuse. Explore various item types - [Create and Manage Flyout Menus in WebViewer](https://docs.apryse.com/web/ui-customization/modular-ui/flyouts.md): Enhance user experience with Flyout Menus in WebViewer. Customize and integrate hovering menus seamlessly for organized functionalities. Learn how to create, manage, and integrate Flyout Menus effecti - [Integrate Modular UI Panels in WebViewer](https://docs.apryse.com/web/ui-customization/modular-ui/panels.md): Enhance user interaction with modular panels in WebViewer! Learn how to seamlessly integrate prebuilt and custom panels into your UI for a dynamic user experience. Explore detailed instructions and ex - [UI Import and Export](https://docs.apryse.com/web/ui-customization/modular-ui/ui-import-and-export.md): Easily build a WebViewer Modular UI using a configuration JSON object. Create a UI with Components, Headers, Panels, Popups, and Flyouts in one place which can be imported and exported to make customi - [Legacy UI](https://docs.apryse.com/web/ui-customization/legacy-ui.md) - [Legacy UI for WebViewer](https://docs.apryse.com/web/ui-customization/legacy-ui/legacy-ui.md): Enhance your web app with the legacy UI for WebViewer. Explore a feature-rich interface for seamless document viewing, annotation, and customization. The Apryse Web SDK streamlines secure, serverless - [Customize the PDF Viewer Toolbar / Header Using JavaScript](https://docs.apryse.com/web/ui-customization/legacy-ui/customizing-header.md): Learn how to customize the header in Legacy UI and migrate to Modular UI for improved performance. Explore various ways to customize the header, from removing buttons to adding custom ones. Check out - [Run WebViewer as a Web Component](https://docs.apryse.com/web/ui-customization/web-component-vs-iframe.md): Learn about the differences between using WebViewer as an iframe and a Web Component in version 11. Discover how to access the WebViewer DOM and apply CSS styles effectively. Upgrade your web experien - [View Mode](https://docs.apryse.com/web/ui-customization/view-mode.md) - [Enable and Use Multi-Tab Document Viewing in WebViewer](https://docs.apryse.com/web/ui-customization/multi-tab.md): Discover how to enable multi-tab document viewing using web with ease. Learn how to open multiple documents simultaneously using WebViewer's API and feature toggle. The Apryse Web SDK streamlines secu - [View and Edit Documents Side-by-Side in WebViewer PDF Editor](https://docs.apryse.com/web/ui-customization/multi-viewer-mode.md): Learn how to enable MultiViewer mode in WebViewer 8.9+ and compare differences between two documents side-by-side. Starting with WebViewer 11.12, review and edit docs when they're side-by-side. - [Customize Popups and the Popup API in WebViewer Using JavaScript](https://docs.apryse.com/web/ui-customization/customizing-popup.md): Learn how to customize popups in WebViewer UI with this comprehensive guide. Discover different types of popups and how to add, modify, or delete items easily using the provided APIs. The Apryse Web S - [Customize WebViewer JavaScript PDF Viewer UI Styles: Buttons, Panels, and Modals](https://docs.apryse.com/web/ui-customization/customizing-styles.md): Learn how to customize WebViewer UI with Modular UI, change color themes, CSS properties, and access DOM elements for a seamless user experience. Explore styling options and enhance your WebViewer int - [Localization](https://docs.apryse.com/web/ui-customization/localization.md) - [Change Language Localization in WebViewer JavaScript PDF Viewer](https://docs.apryse.com/web/ui-customization/localization/languages-and-internationalization.md): Enhance your web app's global reach with localization using i18next. Easily add and switch between languages in WebViewer to cater to diverse audiences worldwide. Explore the supported languages and l - [RTL Language Support](https://docs.apryse.com/web/ui-customization/localization/rtl-language-support.md): WebViewer now supports RTL (Right-to-Left) languages, providing a seamless experience for users who work in languages such as Arabic and Hebrew. - [Changing themes & colors using JavaScript](https://docs.apryse.com/web/ui-customization/themes.md): Easily change themes and colors using JavaScript with this helpful guide. Learn how to switch color themes using an API or custom CSS file path in the constructor. Explore options like setting a CSS f - [Hide and Show DOM Elements in the PDF Viewer Using JavaScript](https://docs.apryse.com/web/ui-customization/hiding-elements.md): Learn how to hide/show DOM elements in a customizable UI with WebViewer. Find data-element attribute values and use constructor options for dynamic element control. Explore APIs for enabling/disabling - [Hiding certain annotations in WebViewer notes panel](https://docs.apryse.com/web/ui-customization/hide-annotations-notes-panel.md): Learn how to selectively show annotations in the notes panel with WebViewer. Configure settings to hide specific annotations using Listable property or setCustomNoteFilter API. Optimize your notes pan - [Zooming in WebViewer](https://docs.apryse.com/web/ui-customization/zoom.md): Enhance your user experience with WebViewer's zoom level APIs. Learn how to retrieve, set, and customize zoom levels effortlessly for a seamless viewing experience on web. The Apryse Web SDK streamlin - [Custom Modals in WebViewer UI](https://docs.apryse.com/web/ui-customization/custom-modals.md): Enhance your WebViewer UI with custom modals using the addCustomModal API. Learn how to create and manage unique modals with header, body, and footer components efficiently. Optimize user experience n - [Advanced UI customization](https://docs.apryse.com/web/ui-customization/advanced-customization.md): Enhance your UI with advanced customization options. Learn how to tweak, test, and deploy the WebViewer UI to suit your needs. The Apryse Web SDK streamlines secure, serverless document processing wit - [Building your own UI](https://docs.apryse.com/web/ui-customization/core.md): Enhance your document processing with Core, the WebViewer engine that manages rendering, annotations, and more. Explore namespaces like DocumentViewer and AnnotationManager for seamless integration. C - [Samples to customize WebViewer UI using JavaScript](https://docs.apryse.com/web/ui-customization/ui-customization-samples.md): Customize WebViewer UI effortlessly with JavaScript. Learn to modify headers, enable/disable features, and show/hide elements using WebViewer APIs. Explore demos and source code for a seamless UI cust - [APIs for customizing UI](https://docs.apryse.com/web/ui-customization/customizing-apis.md): Enhance user experience with APIs for customizing UI. Easily tailor interfaces to suit your needs and create a seamless interaction environment. The Apryse Web SDK streamlines secure, serverless docum --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.apryse.com/web/ui-customization.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.