---
title: "JavaScript PDF rendering library: Fast and accurate | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/features/rendering-pdf-pages/"
md_url: "https://www.nutrient.io/guides/web/features/rendering-pdf-pages.md"
last_updated: "2026-05-20T07:45:29.095Z"
description: "Learn how to display PDF thumbnails using Nutrient's renderPageAsImageURL method. Increase quality and integrate easily in your web applications."
---

# Rendering PDF pages in our JavaScript PDF viewer

In addition to rendering PDFs in the viewer, you can use Nutrient Web SDK to render single PDF pages as images. This can be useful when you want to, for example, display a thumbnail of a single page of a PDF.

## Displaying thumbnails

Nutrient’s [`renderPageAsImageURL`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#renderPageAsImageURL) method lets you insert a page thumbnail as an image tag:

```js

async function appendThumbnail() {
  const instance = await NutrientViewer.load(myConfiguration);

  // Renders the first page (page index 0).
  const src = await instance.renderPageAsImageURL({ width: 400 }, 0);

  const image = document.createElement("img");
  image.src = src;
  document.body.appendChild(image);
}

```

To increase the quality of the resulting image, you can provide a greater `width` value — e.g. `400 * window.devicePixelRatio` — and then set the `width` of the `img` element to the base size — e.g. `400`. Note that the maximum supported size value is `5000px`.

If you prefer to show a thumbnail without loading your PDF, you can also render the thumbnail on the server. Add an `img` for the thumbnail like this:

```html

<img src="https://example.com/documents/abcdefg/cover?width=400&jwt=yourJwt" />

```

Make sure your JSON Web Token (JWT) contains the `"cover-image"` permission. You can learn more about the JWT format in our [Client Authentication guide](https://www.nutrient.io/guides/document-engine/viewer/client-authentication.md).

To find out more details about server-generated thumbnails, check out [our guide about rendering images on the server](https://www.nutrient.io/guides/document-engine/rendering.md).

## Saving a page as an image

Using the same method as above, along with the [FileSaver.js](https://github.com/eligrey/FileSaver.js/) polyfill, your users can save a single page as a PNG file to their computers:

```js

import { saveAs } from "file-saver";

async function savePagePNG() {
  const instance = await NutrientViewer.load(myConfiguration);

  // Renders the first page (page index 0).
  const src = await instance.renderPageAsImageURL({ width: 2000 }, 0);

  saveAs(src, "pdf-page.png");
}

```
---

## Related pages

- [Find and convert PDF coordinates with JavaScript](/guides/web/pspdfkit-for-web/coordinate-spaces.md)
- [View and edit PDF forms online](/guides/web/viewer/rendering/pdf-forms.md)
- [Render pages on canvas in our JavaScript PDF viewer](/guides/web/viewer/rendering/render-in-canvas.md)
- [Render watermarks in our JavaScript PDF viewer](/guides/web/features/watermarks.md)