--- title: "Add custom zoom percentage toolbar item | Nutrient Web SDK" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/add-custom-zoom-perentage/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/add-custom-zoom-perentage.md" last_updated: "2026-05-18T15:18:35.785Z" description: "Learn how to add a custom toolbar item to display current zoom percentage in the main toolbar of PDF viewer using Nutrient Web SDK. Enhance end user experience by showing real-time zoom levels and providing zoom control options." --- # How to add a custom toolbar item to display current zoom percentage When building a PDF document viewer with Nutrient Web SDK, you may want to display the current zoom percentage in the main toolbar. This enables your end users to view the exact zoom level in real time directly from the main toolbar. This enhances the viewing experience by providing more control over zoom adjustments. ## Implementation steps To implement this functionality, add a custom toolbar item that dynamically updates to show the current zoom percentage. This item will also let end users reset the zoom level to 100 percent with a single click. The implementation involves: 1. **Setting a default zoom level** — Initialize the zoom at 100 percent when the viewer loads. 2. **Creating a custom toolbar item** — Add an item that displays the zoom percentage and updates dynamically. 3. **Handling zoom changes** — Use an event listener to track zoom adjustments and update the toolbar item accordingly. For the complete implementation, refer to our [playground demo](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJQU1BERktpdC5sb2FkKHtcbiAgLi4uYmFzZU9wdGlvbnMsXG4gIHRoZW1lOiBQU1BERktpdC5UaGVtZS5EQVJLLFxufSkudGhlbigoaW5zdGFuY2UpID0%252BIHtcbiAgLy8gU2V0IHRoZSBkZWZhdWx0IHpvb20gbGV2ZWwgdG8gMTAwJSBvbiBsb2FkXG4gIGluc3RhbmNlLnNldFZpZXdTdGF0ZSgodmlld1N0YXRlKSA9PiB2aWV3U3RhdGUuc2V0KFwiem9vbVwiLCAxKSk7XG5cbiAgLy8gQ3JlYXRlIGEgY3VzdG9tIHRvb2xiYXIgaXRlbSB0byBkaXNwbGF5IHpvb20gcGVyY2VudGFnZVxuICBjb25zdCB0b29sYmFySXRlbXMgPSBbXG4gICAge1xuICAgICAgdHlwZTogXCJjdXN0b21cIixcbiAgICAgIHRpdGxlOiBcIjEwMCVcIiwgLy8gSW5pdGlhbCBkaXNwbGF5IGFzIDEwMCVcbiAgICAgIGlkOiBcInpvb20tZGlzcGxheVwiLCAvLyBVbmlxdWUgSUQgZm9yIHRoZSB6b29tIGRpc3BsYXkgaXRlbVxuICAgICAgZHJvcGRvd25Hcm91cDogXCJ6b29tR3JvdXBcIiwgLy8gR3JvdXAgaXQgd2l0aCBvdGhlciB6b29tIG9wdGlvbnMgaWYgbmVlZGVkXG4gICAgICBzZWxlY3RlZDogdHJ1ZSwgLy8gU2V0IGFzIHNlbGVjdGVkIGluaXRpYWxseVxuICAgICAgdG9vbHRpcDogXCJSZXNldCB0byAxMDAlXCIsIC8vIFRvb2x0aXAgd2hlbiBob3ZlcmVkXG4gICAgICBvblByZXNzOiAoKSA9PiB7XG4gICAgICAgIC8vIFJlc2V0IHpvb20gdG8gMTAwJSB3aGVuIGNsaWNrZWRcbiAgICAgICAgaW5zdGFuY2Uuc2V0Vmlld1N0YXRlKCh2aWV3U3RhdGUpID0%252BIHZpZXdTdGF0ZS5zZXQoXCJ6b29tXCIsIDEpKTtcbiAgICAgIH0sXG4gICAgfSxcbiAgXTtcblxuICAvLyBBZGQgdGhlIGN1c3RvbSB0b29sYmFyIGl0ZW0gdG8gdGhlIHRvb2xiYXJcbiAgaW5zdGFuY2Uuc2V0VG9vbGJhckl0ZW1zKChpdGVtcykgPT4gaXRlbXMuY29uY2F0KHRvb2xiYXJJdGVtcykpO1xuXG4gIC8vIEV2ZW50IGxpc3RlbmVyIHRvIHVwZGF0ZSB6b29tIGRpc3BsYXkgZHluYW1pY2FsbHlcbiAgaW5zdGFuY2UuYWRkRXZlbnRMaXN0ZW5lcihcInZpZXdTdGF0ZS56b29tLmNoYW5nZVwiLCAoem9vbSkgPT4ge1xuICAgIGlmICh0eXBlb2Ygem9vbSA9PT0gXCJudW1iZXJcIikge1xuICAgICAgY29uc3QgcGVyY2VudGFnZSA9IE1hdGgucm91bmQoem9vbSAqIDEwMCkgKyBcIiVcIjsgLy8gQ29udmVydCB6b29tIGxldmVsIHRvIHBlcmNlbnRhZ2VcbiAgICAgIGluc3RhbmNlLnNldFRvb2xiYXJJdGVtcygoaXRlbXMpID0%252BXG4gICAgICAgIGl0ZW1zLm1hcCgoaXRlbSkgPT5cbiAgICAgICAgICBpdGVtLmlkID09PSBcInpvb20tZGlzcGxheVwiID8geyAuLi5pdGVtLCB0aXRsZTogcGVyY2VudGFnZSB9IDogaXRlbVxuICAgICAgICApXG4gICAgICApO1xuICAgIH1cbiAgfSk7XG4gIGNvbnNvbGUubG9nKFwiTnV0cmllbnQgdmlld2VyIGxvYWRlZCEgLSBieSBOYXJhc2hpbWFuXCIpO1xufSk7XG4ifQ%253D%253D).![dynamic-zoom-percentage](@/assets/guides/web/viewer/zooming/dynamic-zoom-percentage.gif) ## Why a dynamic zoom percentage display matters By integrating a custom toolbar item to display current zoom percentage, you provide your end users with a more intuitive way to manage document scaling. This enhances the end user experience and enables seamless zoom adjustments within your application. To learn more, explore our [Awesome Nutrient GitHub repository](https://github.com/PSPDFKit/awesome-nutrient?tab=readme-ov-file#awesome-nutrient) for a wide variety of sample projects, code snippets, and videos. --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)