---
title: "Customizing CSS in JavaScript PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/customizing-the-interface/css-customization/"
md_url: "https://www.nutrient.io/guides/web/customizing-the-interface/css-customization.md"
last_updated: "2026-06-09T10:25:14.560Z"
description: "Discover how to customize Nutrient Web SDK using CSS classes, configure styles, and enhance your viewer’s appearance with our comprehensive guide."
---

# Customizing CSS styling in our JavaScript PDF viewer

Nutrient Web SDK 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](https://www.nutrient.io/api/web).

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), refer to the [JavaScript API](https://www.nutrient.io/api/web).

Since Nutrient Web SDK 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 Nutrient Web SDK by specifying them in [`Configuration#styleSheets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#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 Nutrient Web SDK with CSS

If you inspect the viewer, you can find the CSS classes starting with the `PSPDFKit-` and `BaselineUI-` prefixes. These are the public classes that you can use to style the viewer. For example, if you want to change the background color of the toolbar, you can use the `.PSPDFKit-Toolbar` class.

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:

   ```css

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

   }
   ```

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](https://www.w3schools.com/html/html_filepaths.asp) can be used instead.

3. The last step is to configure Nutrient Web SDK to load the newly created stylesheet. You can do this with the [`Configuration`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html) interface you pass to the [`load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load) method:

   ```js

   NutrientViewer.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 Nutrient Web SDK and apply the styling accordingly.
---

## Related pages

- [Customizing the theme of our JavaScript PDF viewer](/guides/web/user-interface/theming/custom-theme.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)