Customizing tools in the JavaScript PDF viewer toolbar

You can customize various properties of built-in toolbar items to enhance the functionality of your JavaScript PDF viewer. These properties include:

• title
• icon
• className
• mediaQueries
• disabled
• preset

See our API reference for detailed insights on each property.

For example, you can modify toolbar items to ensure zoom buttons appear across all viewport widths by setting the mediaQueries property to ["all"].

// Change the `mediaQueries` for the zoom items
// so that they're always shown on any device.
instance.setToolbarItems((items) =>
  items.map((item) => {
    if (
      item.type === "zoom-in" ||
      item.type === "zoom-out" ||
      item.type === "zoom-mode"
    ) {
      item.mediaQueries = ["all"];
    }
    return item;
  })
);