Create a Custom Toolbar in Our JavaScript PDF Viewer

With PSPDFKit, you can replace the default toolbar with a custom toolbar that can be positioned anywhere on the page.

The first step is to hide the default toolbar using our ViewState API, which is a snapshot representation of the current state of the PDF viewer. It can be updated using the Instance#setViewState method:

const viewState = instance.viewState;
instance.setViewState(viewState.set("showToolbar", false));

You can read more about this in our View State guide.

There are two ways to implement a custom toolbar:

  • Independent from the PSPDFKit instance

  • By rendering custom DOM nodes inside of a PDF page content itself with our custom overlay feature

Implementing a Custom Toolbar Independent from the PSPDFKit Instance

You can implement a custom toolbar using a pure HTML solution. In the following example, you’ll create a custom toolbar with one button that creates a text annotation when clicked:

<!DOCTYPE html>
<html>
  <head>
    <title>PSPDFKit for Web Standalone | Custom Toolbar Testcase</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <!-- custom toolbar element-->
      <div id="customToolbar">
        <button id="createAnnotation">Create Annotation</button>
      </div>
      <!-- element where we display PSPDFKit instance-->
      <div id="container" style="width: 100%; height: 100vh;"></div>
    </div>
    <script src="https://de.stable.our.services.nutrient-powered.io/pspdfkit.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
PSPDFKit.load({
  container: "#container",
  document: "./assets/test.pdf",
})
  .then(async (instance) => {
    // Hides the PSPDFKit default toolbar.
    const viewState = instance.viewState;
    instance.setViewState(viewState.set("showToolbar", false));

    // Adds a text annotation to the document when the button in the custom toolbar is clicked.
    const btn = document.getElementById("createAnnotation");
    btn.onclick = function (event) {
      const annotation = new PSPDFKit.Annotations.TextAnnotation({
        pageIndex: 0,
        text: {
          format: "plain",
          value: "Welcome to\nPSPDFKit",
        },
        font: "Helvetica",
        isBold: true,
        horizontalAlign: "center",
        boundingBox: new PSPDFKit.Geometry.Rect({
          left: 100,
          top: 200,
          width: 100,
          height: 80
        }),
        fontColor: PSPDFKit.Color.BLACK
      });
      instance.create(annotation);
    };
  })
  .catch(function (error) {
    console.error(error.message);
  });

Another way to achieve the above HTML structure is to create a custom component that returns it:

export const CustomComponent = () => {
  return (
    <div>
      <!-- custom toolbar element-->
      <div id="customToolbar">
        <button id="createAnnotation">
            Create Annotation
        </button>
      </div>
      <!-- element where we display PSPDFKit instance-->
      <div id="container" style="width: 100%; height: 100vh;"></div>
    </div>
  );
}

Rendering a Custom DOM Node with Custom Overlays

As described in our custom overlay guide, custom overlay items are user-generated DOM nodes that are rendered in a page at a given position and add custom functionality to PSPDFKit for Web. For example, they can be used to add images, videos, or complex widgets written either in plain JavaScript or with your framework of choice.

ℹ️ Note: Custom overlay items aren’t part of the PDF spec, and are therefore never persisted in a PDF document or database by PSPDFKit for Web.

A custom overlay item is a simple instance of PSPDFKit.CustomOverlayItem. To create this instance, you need to build your item in JavaScript first:

const customToolbar = document.createElement("div");
customToolbar.innerHTML = `
      <div id="customToolbar">
        <button id="createAnnotation">
          Create Annotation
        </button>
       </div>
    `;
const btn = customToolbar.querySelector("#createAnnotation");
btn.onclick = function (event) {
  const annotation = new PSPDFKit.Annotations.TextAnnotation({
    pageIndex: 0,
    text: {
      format: "plain",
      value: "Welcome to\nPSPDFKit"
    },
    font: "Helvetica",
    isBold: true,
    horizontalAlign: "center",
    boundingBox: new PSPDFKit.Geometry.Rect({
      left: 100,
      top: 200,
      width: 100,
      height: 80
    }),
    fontColor: PSPDFKit.Color.BLACK
  });
  instance.create(annotation);
};

Once you have your DOM Node, you can create the item:

const item = new PSPDFKit.CustomOverlayItem({
  id: "custom-toolbar",
  node: customToolbar,
  pageIndex: 0,
  position: new PSPDFKit.Geometry.Point({ x: 0, y: 0 })
});

Finally, you can insert the item into the PDF document using the Instance#setCustomOverlayItem method:

instance.setCustomOverlayItem(item);