> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/redaction/creating-redaction.md).
# Creating redactions
Create redactions effortlessly using the WebViewer UI or programmatically. Learn how to add redactions with ease using the UITo tool in WebViewer. Click, drag, and create new redactions seamlessly. Pr
{% hint style="info" %}
**Requirements**
*These packages are required to use these features in production. Trial keys have unlimited access to all features*
Package: RedactionLive demo
{% endhint %}
Redactions can be created using the WebViewer UI or programmatically.
## Creating redactions with the UI
To create a new redaction in WebViewer, click on the redaction tool icon to enter redaction mode. Next click and drag on the document to create a new redaction. Note that when creating a redaction on top of text, multiple rectangles are created, similar to when highlighting text.
## Creating redactions programmatically
Redactions can be added to a document similarly to other annotations, by adding them to the AnnotationManager and redrawing. Redaction annotations have two differences compared to other annotation types.
1. [setRect()](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#setRect__anchor) should be used instead of setting `X`,`Y`,`Height`, or `Width` directly
2. The redaction annotation constructor can take an options object that can be used to configure the annotation. There are a number of properties that can be set using the constructor:
* `StrokeColor`: This is the border color of the redaction before it been applied. Defaults to red.
* `FillColor`: This is the fill color of the redaction after it been applied. Defaults to black.
* `PageNumber`: The page that the redaction should appear on.
* `Rect`: A [Math.Rect](https://sdk.apryse.com/api/web/Core.Math.Rect.html) object of the redaction area.
* `Quads`: An array of [Math.Quad](https://sdk.apryse.com/api/web/Core.Math.Quad.html#Quad) objects of to specify multiple redaction areas. If `Quads` are provided then `Rect` is not needed.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const {
documentViewer,
annotationManager,
Annotations,
Math
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const redactAnnot1 = new Annotations.RedactionAnnotation({
PageNumber: 1,
Rect: new Math.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
});
const redactAnnot2 = new Annotations.RedactionAnnotation({
PageNumber: 1,
StrokeColor: new Annotations.Color(0, 255, 0),
FillColor: new Annotations.Color(0, 0, 255),
Quads: [
// Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
new Math.Quad(100, 290, 300, 210, 300, 210, 100, 290),
new Math.Quad(100, 390, 300, 310, 300, 310, 100, 390)
]
});
// can still create redactions without options and set them afterward
const redactAnnot3 = new Annotations.RedactionAnnotation();
redactAnnot3.PageNumber = 1;
// using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
redactAnnot3.setRect(new Math.Rect(100, 100, 300, 200));
// set border color
redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
// set redacted color
redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);
const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];
annotationManager.addAnnotations(redactAnnotations);
// need to draw the annotations otherwise they won't show up until the page is refreshed
annotationManager.drawAnnotationsFromList(redactAnnotations);
});
});
```
{% endcode %}
[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [RedactionAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.RedactionAnnotation.html#RedactionAnnotation__anchor) [RedactionAnnotation.setRect](https://sdk.apryse.com/api/web/Core.Annotations.RedactionAnnotation.html#setRect__anchor) [AnnotationManager.addAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotations__anchor) [AnnotationManager.drawAnnotationsFromList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#drawAnnotationsFromList__anchor)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const {
docViewer,
annotManager,
Annotations
} = instance;
docViewer.on('documentLoaded', () => {
const redactAnnot1 = new Annotations.RedactionAnnotation({
PageNumber: 1,
Rect: new Annotations.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
});
const redactAnnot2 = new Annotations.RedactionAnnotation({
PageNumber: 1,
StrokeColor: new Annotations.Color(0, 255, 0),
FillColor: new Annotations.Color(0, 0, 255),
Quads: [
// Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
new Annotations.Quad(100, 290, 300, 210, 300, 210, 100, 290),
new Annotations.Quad(100, 390, 300, 310, 300, 310, 100, 390)
]
});
// can still create redactions without options and set them afterward
const redactAnnot3 = new Annotations.RedactionAnnotation();
redactAnnot3.PageNumber = 1;
// using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
redactAnnot3.setRect(new Annotations.Rect(100, 100, 300, 200));
// set border color
redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
// set redacted color
redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);
const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];
annotManager.addAnnotations(redactAnnotations);
// need to draw the annotations otherwise they won't show up until the page is refreshed
annotManager.drawAnnotationsFromList(redactAnnotations);
});
});
```
{% endcode %}
[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [RedactionAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.RedactionAnnotation.html#RedactionAnnotation__anchor) [RedactionAnnotation.setRect](https://sdk.apryse.com/api/web/Core.Annotations.RedactionAnnotation.html#setRect__anchor) [AnnotationManager.addAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotations__anchor) [AnnotationManager.drawAnnotationsFromList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#drawAnnotationsFromList__anchor)
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/redaction/creating-redaction.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.