User Interface Customization in Our JavaScript PDF Viewer

PSPDFKit for Web 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.

Launch Demo

PSPDFKit SDKs are deployed in some of the world’s most popular applications, such as those made by Autodesk, Disney, DocuSign, Dropbox, IBM, and Lufthansa.

Key Capabilities

• 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
How to apply custom styling to public CSS classes

Customize Toolbar Icons
How to customize the icons used for toolbar buttons

Dark Theme
How to configure light, dark, and auto themes

Remove a Tool from the Main Toolbar
How to remove items from the main toolbar

Rearrange the Main Toolbar
How to change the display order of items in the main toolbar

Create a New Tool for the Toolbar
How to create a new tool that performs an action when clicked

Customize Existing Tools in the Toolbar
How to customize the properties of existing tools in the toolbar

Print Button
How to customize the built-in print button options

Download/Export Button
How to add or customize a download button

Dropdown Toolbar Groups
How to modify or create groupings of buttons in the toolbar

Responsive Toolbar Groups
How to group toolbar items on smaller screens

Hide the Toolbar
How to control when the toolbar is hidden or displayed

Toolbar Placement
How to adjust the placement of the main toolbar

Activate or Deactivate Toolbar Tools
How to activate or deactivate toolbar items or behaviors

Page Label Navigation
Learn how to navigate PDF pages using the page label

Hide or Show the Sidebar
How to hide the thumbnail, outline, bookmark, and annotation sidebars

Thumbnail Preview
How to configure the thumbnail preview sidebar

Document Outline
How to configure the document outline sidebar

Annotations List
How to configure the annotations list sidebar

Bookmarks
How to configure the bookmarks sidebar

Signatures List
How to configure the signatures list sidebar

Text Selection Tooltip
How to remove buttons from the text selection tooltip

Annotation Inspector
How to show an annotation inspector when an annotation is selected

Contextual Tooltip
How to add contextual tooltips when an annotation is selected

Stamps
Learn about stamp annotation templates and how to customize them

Hide the Annotation Delete Button
How to hide the annotation delete button from the toolbar

Annotation Presets
How to adjust the preconfigured settings for annotation buttons

Annotation Variant Buttons
How to configure the ink highlighter and arrow annotation buttons

Form Creator
How to use the API to build a form builder and editor

Electronic Signatures
How to add electronic signatures using the UI

Signature Creation Modes
How to set the available signature creation modes (draw, image, type)

Signature Fonts
How to set the available fonts to use when signing

Invisible Signing
How to sign a PDF without a signature form field

Digital Signature Validation Statuses
Learn how digital signature validation statuses appear in the UI

Document Editor
Learn about the built-in document editor UI

Redaction
Learn about the built-in redaction UI

Search
Learn about the built-in search UI

Overlays
How to render a custom overlay item on a PDF

Create a Toolbar
How to replace the default toolbar with a new custom toolbar

View State
How to update the PDF viewer’s view state

Localization
How to localize your app for a variety of languages