---
title: "PDF toolbar in JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/samples/customized-pdf-toolbar/"
md_url: "https://www.nutrient.io/guides/web/samples/customized-pdf-toolbar.md"
last_updated: "2026-05-23T00:08:18.187Z"
description: "Learn how to customize your PDF toolbar using Nutrient tools. Explore our guide for creating new tools in your viewer toolbar."
---

# Customize the PDF toolbar using JavaScript

Pick from Nutrient’s existing tools and add your own custom tool in this PDF toolbar customization example. Get additional resources by visiting our guide about [creating a new tool in our viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.md).

[Get Started](https://www.nutrient.io/sdk/web/getting-started.md)

[All Samples](https://www.nutrient.io/guides/web/samples.md)

[Download](https://www.nutrient.io/guides/web/downloads.md)

[Launch Demo](https://www.nutrient.io/demo/)

---

```js

import PSPDFKit from "@nutrient-sdk/viewer";

export function load(defaultConfiguration) {
  // Keep track of the current instance
  // so that we can use it inside of a toolbar item onPress callback.
  let instance = null;

  // Web SDK exposes the default list of items as PSPDFKit.defaultToolbarItems
  // This is an Array that can be filtered or customized as you please.
  const toolbarItems = PSPDFKit.defaultToolbarItems.filter((item) => {
    return /\b(sidebar-bookmarks|sidebar-thumbnails|zoom-in|zoom-out)\b/.test(
      item.type
    );
  });

  toolbarItems.push({
    type: "spacer",
  });

  // A custom item. Inside the onPress callback we can call into Nutrient APIs.
  toolbarItems.push({
    type: "custom",
    id: "my-custom-button",
    title: "click me",
    onPress: function () {
      alert(
        "Hello from Nutrient " +
          PSPDFKit.version +
          "\nYou are at page " +
          instance.viewState.currentPageIndex
      );
    },
  });

  toolbarItems.push({
    type: "search",
  });

  return PSPDFKit.load({...defaultConfiguration,
    toolbarItems: toolbarItems,
  }).then((newInstance) => {
    instance = newInstance;
  });
}

```

This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case.

---

## Related pages

- [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md)
- [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md)
- [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md)
- [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md)
- [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md)
- [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md)
- [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md)
- [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md)
- [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md)
- [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md)
- [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md)
- [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md)
- [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md)
- [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md)
- [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md)
- [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md)
- [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md)
- [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md)
- [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md)
- [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md)
- [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md)
- [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md)
- [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md)
- [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md)
- [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md)
- [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md)
- [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md)
- [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md)
- [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md)
- [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md)
- [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)