Blog Post

PSPDFKit for Web 2022.1 Adds a New UI Customization API

Miguel Calderón

Our first release for 2022 is out now! PSPDFKit for Web 2022.1 adds a new UI customization API and tons of fixes and enhancements.

The new UI customization API will be implemented progressively, with each release encompassing new UI elements as support is extended. In this first iteration, support for fully customizing the sidebars has been added.

New UI Customization API

You can now decorate or completely replace the default sidebar content with your own DOM nodes; moreover, you’ll be able to directly render your content in the nodes provided by this API, which will make it compatible with any UI framework capable of mounting in arbitrary DOM slots, like React.

All UI customization settings are contained in a single object that’s passed in the configuration or set at runtime. It can be used to modify the built-in sidebars:

// Hides ink annotations from the annotations list in the sidebar.
	customUI: {
		[PSPDFKit.UIElement.Sidebar]: {
			[PSPDFKit.SidebarMode.ANNOTATIONS]({ containerNode }) {
				const inkAnnotationsInfo = containerNode.querySelectorAll(

				for (let inkAnnotationInfo of inkAnnotationsInfo) { = 'none';

				return {
					node: containerNode,

Or, you can use it to completely replace the sidebar with your own content:

// Adds custom content to the empty `CUSTOM` sidebar.
	customUI: {
		[PSPDFKit.UIElement.Sidebar]: {
			[PSPDFKit.SidebarMode.CUSTOM]() {
				const node = document.createElement('div');
				node.appendChild(document.createTextNode('My custom sidebar.'));

				return {

Please check out our custom UI guides to learn more.

UI customization API

You can now define custom headers and footers in your HTML templates used for PDF generation. These header and footer elements will be repeated across all generated pages. You could use a custom header or footer to, for example, add custom branding to an entire generated PDF.

To define a header or footer, you need to add a container element with an ID — pspdfkit-header or pspdfkit-footer, respectively. You can use any HTML and CSS inside your header and footer containers, which enables you to add images, use custom fonts, set the background, and more.

It’s also possible to display the current page number and page count in your headers or footers using placeholders we provide by including the following:

Page {{ pageNumber }} of
<strong>{{ pageCount }}</strong>

Please refer to our headers and footers guide to learn more about this new feature.

Headers and Footers

Document Operations Performance Improvements

The performance of several document operations — like adding and removing pages — has been dramatically improved in this release to make it much smoother and faster: These operations will no longer look like a complete document reload; rather, they’ll be applied to the document in the background while the document view applies the changes in a smooth, fluid way.

Document Operations Performance Improvements

And More!

This release also features other improvements, including:

  • Compatibility with the latest Electron versions.

  • Support for using different pointer devices in iOS for drawing and scrolling.

  • A new setting to keep the current annotation tool active.

  • A new resolvedLayoutMode property to get the currently rendered layout mode when set to PSPDFKit.LayoutMode.AUTO.

It also includes many, many fixes! Please refer to the 2022.1 changelog to find out more.

Please email us at if you’re interested in PSPDFKit for Web. For a complete list of features, visit our product page. We’d love to hear about your use case and discuss how to best implement it.

Miguel Calderón Web Team Lead

As part of the Web Team, Miguel loves finding new challenges and trying to determine what the newest technologies can do to improve our product. Writing fiction, reading, and traveling are his passions the rest of the time.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
TUTORIALS  |  Web • Next.js • JavaScript • How To • PDF Viewer

How to Build a Next.js Image Viewer with PSPDFKit

TUTORIAL  |  Web • TypeScript • JavaScript • How To • Image Viewer

How to Build a TypeScript Image Viewer with PSPDFKit

BLOG  |  Web • C++ • WebAssembly

Dynamic Linking in WebAssembly