---
title: "Crop PDF using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/editor/page-manipulation/crop/"
md_url: "https://www.nutrient.io/guides/web/editor/page-manipulation/crop.md"
last_updated: "2026-05-22T14:49:21.739Z"
description: "We shipped the document crop tool in Nutrient Web SDK 2021.5.0. You can use it to crop a single page or multiple pages at a time."
---

# Crop PDFs using JavaScript

We shipped the document crop tool in Nutrient Web SDK 2021.5.0. You can use it to crop a single page or multiple pages at a time.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

Document Crop is only available to customers who have purchased the Document Editor component. If you want to try it, [get in touch](mailto:sales@nutrient.io) with our Sales team.

There are two ways in which you can crop a document: using our user interface, or using our programmatic API.

## Via the user interface

You can find the Document Crop tool in the Document Editor dropdown present in the main toolbar. Once you click on it, your [`interactionMode`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html#interactionMode) will change to `NutrientViewer.InteractionMode.DOCUMENT_CROP`. Now you can go to any page and select the cropping area by clicking on the page and dragging your cursor.

Once you’ve defined the cropping area, you can select whether you want to crop the current page or apply the same cropping area to all the pages.

We also added the following event listeners for if you want to perform a specific task just after the start or end of the crop area change:

```typescript

type CallbackOption = {
  cropBox: Rect;
  pageIndex: number;
};

instance.addEventListener("cropArea.changeStart", (opts: CallbackOption) => {});
instance.addEventListener("cropArea.changeStop", (opts: CallbackOption) => {});

```

## Via the programmatic API

You can use [`NutrientViewer.Instance#applyOperations`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#applyOperations) to crop the pages of the PDF document:

```js

await instance.applyOperations([
  {
    type: "cropPages",
    pageIndexes: [1, 2],
    cropBox: new NutrientViewer.Geometry.Rect({
      left: 10,
      top: 10,
      width: 100,
      height: 100
    })
  }
]);

```

If you omit the `pageIndexes` property from the above code, all the PDF document’s pages will be cropped.
---

## Related pages

- [Move or copy PDF pages using JavaScript](/guides/web/editor/page-manipulation/move-or-copy.md)
- [Adding margins to PDF pages using JavaScript](/guides/web/editor/page-manipulation/add-margins.md)
- [Remove pages from a PDF using JavaScript](/guides/web/editor/page-manipulation/remove.md)
- [Rotating PDF pages using JavaScript](/guides/web/editor/page-manipulation/rotate.md)