Customizing CSS Styling in Our JavaScript PDF Viewer

PSPDFKit for Web allows you to customize every aspect of the viewer. This includes a number of supported public CSS classes that you can use to apply custom styling to. The up-to-date list of customizable elements can be found in the CSS section of our API documentation.

CSS classes not documented here are subject to change and therefore shouldn’t be relied upon. If you want to customize viewport-related properties (e.g. viewport padding or page spacing), please refer to the JavaScript API.

Since PSPDFKit for Web runs in an isolated container, you cannot overwrite the CSS rules from within your current stylesheets. To customize the CSS, you need to prepare separate files. You must configure them in PSPDFKit for Web by specifying them in Configuration#styleSheets.

The network request for the files will be triggered by your origin. This also means that cookies you set will be transmitted (the request won’t be sent from or to the origin of Document Engine).

How to Customize the Appearance of PSPDFKit for Web with CSS

Let’s say you want to change the background color of the toolbar. If you look through our API documentation, you’ll find a section dedicated to all toolbar-related styling. You can use your mouse to move over the elements you want to style. For example, if you move over the toolbar, you can see the associated CSS class .PSPDFKit-Toolbar.

1. With that information in mind, you can create a new stylesheet that overwrites the properties. For this example, you only want to change the background color as an illustration:

   /* my-pspdfkit.css */
   .PSPDFKit-Toolbar {
     background-color: #f00;
   }

2. The next step is to host this CSS file parallel to your existing CSS. Most web frameworks have a public/ directory you can use to upload this file and make it accessible from the web.

   For this example, you’re hosting a site, https://example.com, and you’ll upload the stylesheet to https://example.com/my-pspdfkit.css.

If the CSS file is in the same domain, a relative URL can be used instead.

3. The last step is to configure PSPDFKit for Web to load the newly created stylesheet. You can do this with the Configuration interface you pass to the load() method:

PSPDFKit.load({
  // ...
  styleSheets: [
    "https://example.com/my-pspdfkit.css", // hosted CSS file
    "./my-pspdfkit.css" // or local CSS file
  ]
})
  .then((instance) => {
    console.info("PSPDFKit loaded", instance);
  })
  .catch((error) => {
    console.error(error.message);
  });

You can connect to your local CSS file with a relative path, or host your CSS files and use an absolute URL.

This will inject the stylesheet into PSPDFKit for Web and apply the styling accordingly.