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.
PSPDFKit SDKs are deployed in some of the world’s most popular applications, such as those made by Autodesk, Disney, UBS, 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