Redacting PDFs Using the UI in Our JavaScript Viewer

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

Try for Free Launch Demo

Toolbar Items

There are two toolbar items available: one for creating redactions by dragging the cursor around text Text highlighter redaction tool, and another one for drawing a rectangle over an arbitrary area Area redaction tool. To use these tools, you’ll need to set the toolbar items array appropriately (using PSPDFKit.Configuration#toolbarItems or PSPDFKit.Instance#setToolbarItems):

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

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

Text Highlighter

When the text redaction tool Text highlighter 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 PSPDFKit.ViewState#interactionMode property to PSPDFKit.InteractionMode.REDACT_TEXT_HIGHLIGHTER. Refer to our Customize Existing Tools guide to learn more.

Area Highlighter

When the area redaction tool 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 PSPDFKit.ViewState#interactionMode property to PSPDFKit.InteractionMode.REDACT_SHAPE_RECTANGLE. Refer to our Customize Existing Tools guide to learn more.

ℹ️ Note: Both the text highlighter redaction button and the area highlighter redaction button are hidden by default in our UI and are only available when explicitly set via the API:

PSPDFKit.load({
	toolbarItems: [
		...PSPDFKit.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 PSPDFKit.ViewState#previewRedactionMode flag to true:

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

Applying Redactions

To actually redact the document after all the redaction annotations are added, call the PSPDFKit.Instance#applyRedactions() API method. This will overwrite the existing document, removing content irreversibly:

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.

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.

Warning

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.