---
title: "JavaScript PDF redaction tools | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/redaction/built-in-ui/"
md_url: "https://www.nutrient.io/guides/web/redaction/built-in-ui.md"
last_updated: "2026-06-01T11:07:04.893Z"
description: "Use built-in redaction UI tools to mark content and then permanently apply redactions before final export/share for compliance-safe outputs."
---

# Redact PDFs using JavaScript tools

<!-- Partial used by the "User Interface -> Redaction" and "Redaction -> Built in UI" guides -->

In addition to being able to create redactions programmatically, you can create and customize redactions via the UI Nutrient provides.

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

[Launch demo](https://www.nutrient.io/demo/pdf-redaction-tool/)

## Required toolbar tools

For redaction workflows, include both required tools explicitly in your toolbar configuration:

- `redact-text-highlighter`

- `redact-rectangle`

Set the toolbar items array with [`NutrientViewer.Configuration#toolbarItems`](https://www.nutrient.io/api/web/interfaces/Configuration.html#toolbaritems) or [`NutrientViewer.Instance#setToolbarItems`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#settoolbaritems):

```javascript

const toolbarItems = NutrientViewer.defaultToolbarItems.concat([
	{ type: "redact-text-highlighter" }, // Text redaction tool.
	{ type: "redact-rectangle" } // Area redaction tool.
]);

NutrientViewer.load({
	//...
	toolbarItems
});

```

### Text highlighter

When the text redaction tool  is active, you can drag a selection across regions of text, and a new redaction annotation will be outlined throughout it. It works in a way similar to how the text highlighter tool does.

Additionally, this interaction can be programmatically enabled by setting the [`NutrientViewer.ViewState#interactionMode`](https://www.nutrient.io/api/web/classes/NutrientViewer.ViewState.html#interactionmode) property to `NutrientViewer.InteractionMode.REDACT_TEXT_HIGHLIGHTER`. Refer to our [customize existing tools](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md) guide to learn more.

### Area highlighter

When the area redaction tool  is active, you can draw a rectangle around the pages of a document, and a new redaction annotation matching the region drawn will be added. It works in a way similar to how the tool used to create rectangle annotations does.

Additionally, this tool can be programmatically enabled by setting the [`NutrientViewer.ViewState#interactionMode`](https://www.nutrient.io/api/web/classes/NutrientViewer.ViewState.html#interactionmode) property to `NutrientViewer.InteractionMode.REDACT_SHAPE_RECTANGLE`. Refer to our [customize existing tools](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md) guide to learn more.

Both the text highlighter redaction button and the area highlighter redaction button are hidden by [default](https://www.nutrient.io/api/web/variables/NutrientViewer.defaultToolbarItems.html) in our UI and are only available when explicitly set via the [API](https://www.nutrient.io/api/web/interfaces/Configuration.html#toolbaritems).

```js

NutrientViewer.load({
	toolbarItems: [...NutrientViewer.defaultToolbarItems,
		{ type: "redact-rectangle" },
		{ type: "redact-text-highlighter" }
	]
});

```

## Text selection

Another way of creating a text redaction is by first selecting text and then choosing the redaction toolbar from the contextual tooltip that appears.

## Previewing redactions

To preview redactions and see how they’d look when applied without removing any document content, 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));

```

## Applying redactions

To actually redact the document after all the redaction annotations are added, 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.

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

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

```javascript

await instance.applyRedactions();
console.log('The document has been redacted.');

```

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

<!-- This partial is rendered in guide articles describing redaction. -->

## Redacting graphic objects shared across pages

Graphic objects — including images and vector graphics — can be reused across pages in a PDF. If a graphic object is redacted and reused, all instances of that graphic object will also be redacted.

This means that, for example, when you redact part of an image, the same part of the same image on another page will also be redacted. This is compatible with how Adobe Acrobat does it. A common example of this is if you have to redact a logo that is shown on each page.

Even if the images look exactly the same, they could be separate images and not be redacted the same. Always be careful and review the redacted document when you’re done.
---

## Related pages

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