---
title: "Customizing JavaScript PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/"
md_url: "https://www.nutrient.io/guides/web/user-interface.md"
last_updated: "2026-06-15T15:15:07.051Z"
description: "Discover the secret to enhancing web user interface design like never before. Unleash the power at your fingertips with expert guidance."
---

# User interface customization in our JavaScript PDF viewer

Nutrient Web SDK makes it easy to customize every part of the user interface. Our robust API for configuring behavior and appearance lets you hide or add buttons, change the theme to match your look and feel, trigger workflows, create overlays, and much more.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

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

Try our [interactive UI demo](https://www.nutrient.io/demo/ui/) or explore more examples in [awesome-nutrient](https://github.com/pspdfkit/awesome-nutrient/tree/master/playground/toolbar-menus).

## Build your own UI

Nutrient Web SDK supports two complementary customization paths. Pick the one that matches your goal:

- **Add to or modify our UI** — Keep the bundled toolbars, sidebars, and popovers and use the toolbar items, view state, and theming APIs to adjust them. This is what the rest of this overview covers.

- **Replace our UI with your own** — Strip the bundled chrome, restore only the components you need, and drive everything programmatically through the Instance API. This is the **headless** path.

Headless entry points:

**[Headless UI](https://www.nutrient.io/guides/web/user-interface/ui-customization/headless-ui.md)**\
Build your own document experience with `preset: 'minimal'`. Strip all default chrome and selectively restore only the slots you need.

**[Supported slots reference](https://www.nutrient.io/guides/web/user-interface/ui-customization/supported-slots.md)**\
Complete inventory of every slot-customizable component in the Web SDK — tools, annotations, content editor, signatures, stamps, measurements, comparison, sidebar, and standalone components.

**[Slot examples](https://www.nutrient.io/guides/web/user-interface/ui-customization/examples.md)**\
Per-domain copy-paste recipes for tools, search, annotations, document editor, signatures, content editor, password prompt, measurements, and multislot composition.

**[Headless annotations](https://www.nutrient.io/guides/web/headless.md)**\
Drive every annotation type from your own UI — ink, text, markup, measurements, shapes, links, redactions, stamps, images, notes, and callouts — through the `instance.annotations.*` namespaces.

## Quick start

The recipes below cover the most common UI tweaks: switching themes, adding or removing toolbar tools, hiding the toolbar, controlling the sidebar, and adding custom overlays.

### Apply dark theme

Set the theme at load time:

```js

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "/path/to/document.pdf",
  theme: NutrientViewer.Theme.DARK,
});

```

Available themes: `LIGHT`, `DARK`, `AUTO`, `HIGH_CONTRAST_LIGHT`, `HIGH_CONTRAST_DARK`.

### Add a custom toolbar button

Create a button that performs any action:

```js

const customButton = {
  type: "custom",
  id: "my-action",
  icon: "/icons/my-icon.svg",
  title: "My Action",
  onPress: () => {
    console.log("Button clicked!");
  },
};

const toolbarItems = NutrientViewer.defaultToolbarItems;
toolbarItems.push(customButton);

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "/path/to/document.pdf",
  toolbarItems,
});

```

### Remove a tool from the toolbar

Filter out unwanted items:

```js

const toolbarItems = NutrientViewer.defaultToolbarItems.filter(
  (item) => item.type!== "print",
);

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "/path/to/document.pdf",
  toolbarItems,
});

```

### Hide the toolbar

Use the view state API:

```js

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "/path/to/document.pdf",
});

// Hide the toolbar.
instance.setViewState((viewState) => viewState.set("showToolbar", false));

```

### Open with the sidebar visible

Set the initial view state at load time:

```js

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "/path/to/document.pdf",
  initialViewState: new NutrientViewer.ViewState({
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS,
  }),
});

```

### Add a custom overlay

Render custom HTML on top of the PDF:

```js

const overlay = document.createElement("div");
overlay.innerHTML = "<strong>Draft</strong>";
overlay.style.cssText =
  "background: yellow; padding: 8px; border-radius: 4px;";

const item = new NutrientViewer.CustomOverlayItem({
  id: "draft-badge",
  node: overlay,
  pageIndex: 0,
  position: new NutrientViewer.Geometry.Point({ x: 50, y: 50 }),
});

instance.setCustomOverlayItem(item);

```

## Key capabilities

The UI customization surface covers five areas:

- **Theming** — Adjust CSS, apply a dark theme, or replace icons

- **Toolbars** — Remove, rearrange, and create new tools or toolbars

- **Sidebar** — Customize thumbnails, outline, and bookmarks

- **Overlays** — Render any custom HTML content on top of the PDF

- **Localization** — Make your app available in other languages

## Guides for customizing the UI

**[CSS styling](https://www.nutrient.io/guides/web/customizing-the-interface/css-customization.md)**\
How to apply custom styling to public CSS classes

**[Customize toolbar icons](https://www.nutrient.io/guides/web/user-interface/theming/icons.md)**\
How to customize the icons used for toolbar buttons

**[Dark theme](https://www.nutrient.io/guides/web/user-interface/theming/dark-theme.md)**\
How to configure light, dark, and auto themes

**[Remove a tool from the main toolbar](https://www.nutrient.io/guides/web/customizing-the-interface/customizing-the-toolbar.md)**\
How to remove items from the main toolbar

**[Rearrange the main toolbar](https://www.nutrient.io/guides/web/user-interface/main-toolbar/rearrange.md)**\
How to change the display order of items in the main toolbar

**[Create a new tool for the toolbar](https://www.nutrient.io/guides/web/user-interface/main-toolbar/create-a-new-tool.md)**\
How to create a new tool that performs an action when clicked

**[Customize existing tools in the toolbar](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md)**\
How to customize the properties of existing tools in the toolbar

**[Print button](https://www.nutrient.io/guides/web/user-interface/main-toolbar/print-button.md)**\
How to customize the built-in print button options

**[Download/export button](https://www.nutrient.io/guides/web/user-interface/main-toolbar/download-export-button.md)**\
How to add or customize a download button

**[Dropdown toolbar groups](https://www.nutrient.io/guides/web/user-interface/main-toolbar/dropdown-groups.md)**\
How to modify or create groupings of buttons in the toolbar

**[Responsive toolbar groups](https://www.nutrient.io/guides/web/user-interface/main-toolbar/responsive-groups.md)**\
How to group toolbar items on smaller screens

**[Hide the toolbar](https://www.nutrient.io/guides/web/user-interface/main-toolbar/hide-the-toolbar.md)**\
How to control when the toolbar is hidden or displayed

**[Toolbar placement](https://www.nutrient.io/guides/web/user-interface/main-toolbar/placement.md)**\
How to adjust the placement of the main toolbar

**[Activate or deactivate toolbar tools](https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md)**\
How to activate or deactivate toolbar items or behaviors

**[Page label navigation](https://www.nutrient.io/guides/web/features/navigation-page-labels.md)**\
How to navigate PDF pages using the page label

**[Hide or show the sidebar](https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-sidebar-via-api.md)**\
How to hide the thumbnail, outline, bookmark, and annotation sidebars

**[Thumbnail preview](https://www.nutrient.io/guides/web/user-interface/sidebar/thumbnail-preview.md)**\
How to configure the thumbnail preview sidebar

**[Document outline](https://www.nutrient.io/guides/web/user-interface/sidebar/document-outline.md)**\
How to configure the document outline sidebar

**[Annotations list](https://www.nutrient.io/guides/web/user-interface/sidebar/annotations-list.md)**\
How to configure the annotations list sidebar

**[Bookmarks](https://www.nutrient.io/guides/web/user-interface/sidebar/bookmarks.md)**\
How to configure the bookmarks sidebar

**[Signatures list](https://www.nutrient.io/guides/web/user-interface/sidebar/signatures-list.md)**\
How to configure the signatures list sidebar

**[Text selection tooltip](https://www.nutrient.io/guides/web/user-interface/inline-text-selection-toolbar/tooltip.md)**\
How to remove buttons from the text selection tooltip

**[Annotation inspector](https://www.nutrient.io/guides/web/user-interface/annotations/inspector.md)**\
How to show an annotation inspector when an annotation is selected

**[Contextual tooltip](https://www.nutrient.io/guides/web/customizing-the-interface/annotation-tooltips.md)**\
How to add contextual tooltips when an annotation is selected

**[Stamps](https://www.nutrient.io/guides/web/user-interface/annotations/stamps.md)**\
Learn about stamp annotation templates and how to customize them

**[Hide the annotation delete button](https://www.nutrient.io/guides/web/user-interface/annotations/hide-the-delete-button.md)**\
How to hide the annotation delete button from the toolbar

**[Annotation presets](https://www.nutrient.io/guides/web/user-interface/annotations/presets.md)**\
How to adjust the preconfigured settings for annotation buttons

**[Annotation variant buttons](https://www.nutrient.io/guides/web/user-interface/annotations/variant-buttons.md)**\
How to configure the ink highlighter and arrow annotation buttons

**[Form Creator](https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md)**\
How to use the API to build a form builder and editor

**[Electronic signatures](https://www.nutrient.io/guides/web/user-interface/signatures/electronic-signatures.md)**\
How to add electronic signatures using the UI

**[Signature creation modes](https://www.nutrient.io/guides/web/signatures/customizing-the-signature-user-interface.md)**\
How to set the available signature creation modes (draw, image, type)

**[Signature fonts](https://www.nutrient.io/guides/web/user-interface/signatures/signature-fonts.md)**\
How to set the available fonts to use when signing

**[Invisible signing](https://www.nutrient.io/guides/web/user-interface/signatures/invisible-signing.md)**\
How to sign a PDF without a signature form field

**[Digital signature validation statuses](https://www.nutrient.io/guides/web/user-interface/signatures/validation-status.md)**\
How digital signature validation statuses appear in the UI

**[Document Editor](https://www.nutrient.io/guides/web/user-interface/document-editor.md)**\
Learn about the built-in document editor UI

**[Redaction](https://www.nutrient.io/guides/web/user-interface/redaction.md)**\
Learn about the built-in redaction UI

**[Search](https://www.nutrient.io/guides/web/user-interface/search.md)**\
Learn about the built-in search UI

**[Overlays](https://www.nutrient.io/guides/web/customizing-the-interface/creating-custom-overlay-items.md)**\
How to render a custom overlay item on a PDF

**[Create a toolbar](https://www.nutrient.io/guides/web/user-interface/create-a-toolbar.md)**\
How to replace the default toolbar with a new custom toolbar

**[View state](https://www.nutrient.io/guides/web/customizing-the-interface/viewstate.md)**\
How to update the PDF viewer’s view state

**[Localization](https://www.nutrient.io/guides/web/features/localization.md)**\
How to localize your app for a variety of languages

**Call to Action**

Start your free trial for unlimited access and expert support.

[Learn More](https://www.nutrient.io/sdk/web/getting-started/other-frameworks/javascript.md)
---

## Related pages

- [Create a custom toolbar in our JavaScript PDF viewer](/guides/web/user-interface/create-a-toolbar.md)
- [PDF form field date and time picker](/guides/web/user-interface/date-and-time-picker.md)
- [Form Designer: Create and edit PDF form fields using JavaScript](/guides/web/user-interface/form-designer.md)
- [Right-to-left](/guides/web/user-interface/rtl-languages.md)
- [Custom overlays in our viewer](/guides/web/customizing-the-interface/creating-custom-overlay-items.md)
- [Localization: Updating languages in our JavaScript PDF viewer](/guides/web/features/localization.md)
- [Customizing the search UI in our PDF viewer toolbar](/guides/web/user-interface/search.md)
- [Create and customize redactions in our PDF viewer](/guides/web/user-interface/redaction.md)
- [User interface troubleshooting](/guides/web/user-interface/troubleshooting.md)
- [View state in our JavaScript PDF viewer](/guides/web/customizing-the-interface/viewstate.md)

## Pages in this section

- [Custom color picker for color dropdowns in viewer](/guides/web/user-interface/color-picker/custom-color-picker.md)
- [Adding custom color presets to color dropdowns in viewer](/guides/web/user-interface/color-picker/custom-presets.md)
- [UI for editing PDF documents](/guides/web/user-interface/document-editor.md)
- [Customizing the document editor toolbar and footer](/guides/web/user-interface/document-editor/customizing-the-document-editor-toolbar-and-footer.md)
- [Hide the delete button in the annotation toolbar](/guides/web/user-interface/annotations/hide-the-delete-button.md)
- [Adding contextual tooltips to annotations in viewer](/guides/web/customizing-the-interface/annotation-tooltips.md)
- [Customizing the annotation inspector in our viewer](/guides/web/user-interface/annotations/inspector.md)
- [Mastering annotation presets in your PDF viewer](/guides/web/user-interface/annotations/presets.md)
- [Adding stamp annotations in our JavaScript PDF viewer](/guides/web/user-interface/annotations/stamps.md)
- [Customizing annotation variant buttons in the toolbar](/guides/web/user-interface/annotations/variant-buttons.md)
- [Annotations list in our viewer sidebar](/guides/web/user-interface/sidebar/annotations-list.md)
- [Customizing the sidebar component in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/customization.md)
- [Customizing the OCG layers icon in our PDF viewer UI](/guides/web/user-interface/sidebar/layers.md)
- [Bookmark navigation in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/bookmarks.md)
- [Hide or show sidebar navigation in our viewer](/guides/web/customizing-the-interface/controlling-the-sidebar-via-api.md)
- [Document outline in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/document-outline.md)
- [Navigate signed and unsigned signature fields in our PDF viewer sidebar](/guides/web/user-interface/sidebar/signatures-list.md)
- [Thumbnail preview in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/thumbnail-preview.md)
- [Create a new annotation tool in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/create-a-new-tool.md)
- [Customizing an existing annotation tool in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/customize-existing-tools.md)
- [Creating a custom annotation toolbar for mobile devices](/guides/web/user-interface/annotation-toolbar/mobile-responsiveness.md)
- [Rearranging annotation tools in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/rearrange.md)
- [Removing an annotation tool from our viewer toolbar](/guides/web/user-interface/annotation-toolbar/remove-a-tool.md)
- [Customizing CSS styling in our JavaScript PDF viewer](/guides/web/customizing-the-interface/css-customization.md)
- [Enabling dark theme in our JavaScript PDF viewer](/guides/web/user-interface/theming/dark-theme.md)
- [Customizing icons in our JavaScript PDF viewer](/guides/web/user-interface/theming/icons.md)
- [Customizing the theme of our JavaScript PDF viewer](/guides/web/user-interface/theming/custom-theme.md)
- [Activate or deactivate tools in our viewer toolbar](/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md)
- [Configuring pager toolbar display behavior](/guides/web/user-interface/main-toolbar/pager-display.md)
- [Customizing tools in the JavaScript PDF viewer toolbar](/guides/web/user-interface/main-toolbar/customize-existing-tools.md)
- [Create a new tool in PDF viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.md)
- [Customizing download/export buttons in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/download-export-button.md)
- [Adding page labels to navigation in our viewer](/guides/web/features/navigation-page-labels.md)
- [Customize dropdown navigation in the viewer toolbar](/guides/web/user-interface/main-toolbar/dropdown-groups.md)
- [Customize the print button (hide/enable) in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/print-button.md)
- [Hiding the toolbar in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/hide-the-toolbar.md)
- [Adjust the placement of the toolbar in our viewer](/guides/web/user-interface/main-toolbar/placement.md)
- [Rearrange tools in our viewer toolbar](/guides/web/user-interface/main-toolbar/rearrange.md)
- [Removing a tool from the toolbar in our JavaScript viewer](/guides/web/customizing-the-interface/customizing-the-toolbar.md)
- [Customizing responsive navigation in our viewer toolbar](/guides/web/user-interface/main-toolbar/responsive-groups.md)
- [Capturing electronic signatures with viewer modals](/guides/web/user-interface/signatures/electronic-signatures.md)
- [Customizing electronic signature fonts](/guides/web/user-interface/signatures/signature-fonts.md)
- [Invisible signing: Digitally sign any PDF](/guides/web/user-interface/signatures/invisible-signing.md)
- [Customizing the digital signature validation status](/guides/web/user-interface/signatures/validation-status.md)
- [Customizing the electronic signature UI](/guides/web/signatures/customizing-the-signature-user-interface.md)
- [Building a comment thread UI with the customization API](/guides/web/user-interface/ui-customization/comment-thread-example.md)
- [Slot customization examples](/guides/web/user-interface/ui-customization/examples.md)
- [Custom sidebars](/guides/web/user-interface/ui-customization/custom-sidebars.md)
- [Building headless document UIs](/guides/web/user-interface/ui-customization/headless-ui.md)
- [Set UI customization configuration](/guides/web/user-interface/ui-customization/set-ui.md)
- [Building a custom document editor sidebar with the customization API](/guides/web/user-interface/ui-customization/document-editor-sidebar-example.md)
- [Customizing the Nutrient Web SDK UI](/guides/web/user-interface/ui-customization/introduction.md)
- [Supported slots for UI customization](/guides/web/user-interface/ui-customization/supported-slots.md)
- [Create a new inline text selection tool in the viewer toolbar](/guides/web/user-interface/inline-text-selection-toolbar/create-a-new-tool.md)
- [Customizing existing tools in our inline text selection toolbar](/guides/web/user-interface/inline-text-selection-toolbar/customize-existing-tools.md)
- [Rearranging inline text selection tools in the viewer toolbar](/guides/web/user-interface/inline-text-selection-toolbar/rearrange-items.md)
- [Remove inline text selection tools](/guides/web/user-interface/inline-text-selection-toolbar/remove-a-tool.md)
- [Remove all tools from the inline text selection toolbar](/guides/web/user-interface/inline-text-selection-toolbar/remove-all-tools.md)
- [Customize the text selection tooltip in our viewer](/guides/web/user-interface/inline-text-selection-toolbar/tooltip.md)
- [Optimizing for mobile for our JavaScript PDF viewer](/guides/web/customizing-the-interface/optimizing-for-mobile.md)
- [Internet Explorer [IE11] support for our JavaScript PDF viewer](/guides/web/customizing-the-interface/ie11.md)