This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/user-interface/main-toolbar/rearrange.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Rearrange tools in JavaScript PDF viewer toolbar | Nutrient

Rearrange tools in our viewer toolbar

Markdown version of this page, suitable for AI agents and automation

Nutrient Web SDK comes with a customizable main toolbar that, by default, includes a number of predefined items. You can rearrange toolbar items using our API.

Nutrient Web SDK is initialized with a default set of items that can be retrieved via NutrientViewer.defaultToolbarItems:

const defaultItems = NutrientViewer.defaultToolbarItems;
console.log(defaultItems);

Items in the toolbar are plain JavaScript objects with the shape of a NutrientViewer.ToolbarItem. To rearrange any item, get the current array of toolbar items via instance.toolbarItems, change the order a toolbar item is displayed in an array, and then set it again to update the UI:

const items = instance.toolbarItems;
// Reverse the order of the toolbar items.
instance.setToolbarItems(items.reverse());