---
title: "Redact PDF programmatically using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/redaction/programmatically/"
md_url: "https://www.nutrient.io/guides/web/redaction/programmatically.md"
last_updated: "2026-05-20T07:45:29.083Z"
description: "Programmatically redact PDFs using customizable redaction annotations and overlay text options, with a production-safe sequence: create marks, permanently apply redactions, then export."
---

# Programmatically redact PDFs using JavaScript

With Nutrient Web SDK, you can programmatically redact documents directly on the client with JavaScript. Redaction annotations are created via [`RedactionAnnotation`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html) and permanently applied via [`NutrientViewer.Instance#applyRedactions()`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#applyredactions).

Do not allow final export before `applyRedactions()` succeeds when compliance/sanitization is required.

Use the [`rects`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#rects) property to set the regions that should be covered by the redaction annotation. Additionally, the [`boundingBox`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#boundingbox) needs to be set to a [`NutrientViewer.Geometry.Rect`](https://www.nutrient.io/api/web/classes/NutrientViewer.Geometry.Rect.html) containing all the specified [`rects`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#rects).

You also have a few customization options for how a redaction should look, both while the redaction annotation is in its marked state, which is when it has been created but not yet applied, and in its redacted state, which is when the content is effectively redacted:

- [`overlayText`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#overlaytext) can be used to set the text that should be displayed at a specified region when a redaction has been applied.

- [`repeatOverlayText`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#repeatoverlaytext) defines whether the overlay text should be drawn only once or repeated to fill the entire redaction area. This defaults to `false`, which means the overlay text is only drawn once. It has no effect if there’s no overlay text specified.

- [`color`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#color) can be used to change the color of the overlay text. It has no effect if there’s no overlay text specified. This defaults to [`NutrientViewer.Color.RED`](https://www.nutrient.io/api/web/classes/NutrientViewer.Color.html#red).

- [`fillColor`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#fillcolor) specifies the background color of the redaction area after it has been applied. The color is drawn on all the specified [`rects`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#rects). This defaults to [`NutrientViewer.Color.BLACK`](https://www.nutrient.io/api/web/classes/NutrientViewer.Color.html#black).

- [`outlineColor`](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RedactionAnnotation.html#outlinecolor) specifies the color used for the redaction’s border in its marked state. This defaults to [`NutrientViewer.Color.RED`](https://www.nutrient.io/api/web/classes/NutrientViewer.Color.html#red).

It isn’t possible to change the appearance once a redaction has been applied, since the redaction annotation will be removed from the document and the redaction will be part of the content of the document. This is an action that irreversibly replaces the original content under the specified region:

```js

const boundingBox = new NutrientViewer.Geometry.Rect({
  left: 25,
  top: 25,
  width: 175,
  height: 30
});

try {
  await instance.create(
    new NutrientViewer.Annotations.RedactionAnnotation({
      pageIndex: 0,
      boundingBox,
      rects: NutrientViewer.Immutable.List([boundingBox]),
      color: NutrientViewer.Color.ORANGE,
      overlayText: "REDACTED"
    })
  );
  console.log("Redaction annotation created");
} catch (error) {
  console.error("Failed to create redaction annotation:", error.message);
}

```

The redaction annotation created with the above code snippet would look like what’s shown in the image below.

| Marked state                                                                                                            | Redacted state                                                                                                                |
| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|  |  |

## Redaction properties

Once a redaction is added to the document, its properties and appearance can be customized via the annotation toolbar.![Toolbar options for redaction annotations](@/assets/guides/web/redaction/introduction-to-redaction/redaction-toolbar.png)

The properties under the Preview label affect the redacted appearance (i.e. how the document will look once redactions are applied), while the outline color picker only affects the marked appearance of the annotation.

## Preview redactions

To preview redactions and see how they’d look when applied, without removing any document content, you can set the [`NutrientViewer.ViewState#previewRedactionMode`](https://www.nutrient.io/api/web/classes/NutrientViewer.ViewState.html#previewredactionmode) flag to `true`:

```javascript

instance.setViewState((v) => v.set("previewRedactionMode", true));

```

## Apply redactions

To actually redact the document after all the redaction annotations are added, you can call the [`NutrientViewer.Instance#applyRedactions()`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#applyredactions) API method. This will overwrite the existing document, removing content irreversibly:

```javascript

try {
  await instance.applyRedactions();
  console.log("The document has been redacted.");
} catch (error) {
  console.error("Failed to apply redactions:", error.message);
}

```

The redaction annotations will be removed once the document has been redacted and the affected content has been removed.

## Exporting final/legal output

After `applyRedactions()` succeeds, export the final output PDF:

| Goal                                                   | Recommended export             | Notes                                                                 |
| ------------------------------------------------------ | ------------------------------ | --------------------------------------------------------------------- |
| Final sanitized output after permanent redaction apply | `exportPDF()`                  | Default final export path.                                            |
| Final sanitized output + flatten remaining annotations | `exportPDF({ flatten: true })` | Use when downstream workflows require flattened non-redaction markup. |

For the canonical production sequence (mark → apply permanently → export), refer to [production-safe redaction workflow](https://www.nutrient.io/guides/web/redaction/production-safe-workflow.md).
---

## Related pages

- [Redact PDFs using JavaScript tools](/guides/web/redaction/built-in-ui.md)
- [JavaScript PDF redaction library](/guides/web/redaction.md)
- [Headless redaction](/guides/web/redaction/headless.md)
- [Production-safe redaction workflow](/guides/web/redaction/production-safe-workflow.md)
- [PDF redaction techniques for your documents](/guides/web/redaction/introduction-to-redaction.md)
- [Search and redact PDFs using JavaScript](/guides/web/redaction/search-and-redact.md)
- [Automate document redaction with predefined patterns](/guides/web/redaction/preset-patterns.md)
- [Redact PDFs using regex](/guides/web/redaction/regex-patterns.md)