Edit text and images in PDFs using the WebViewer JavaScript library

Starting with WebViewer 10.3, you can edit text and images directly within PDF files using WYSIWYG PDF content editing.

This guide explains how to edit text and images in PDF documents using the WebViewer UI. It also describes how to perform the same tasks programmatically using the WebViewer Core APIs. It's intended for two audiences:

• Product users who need clear, step‑by‑step instructions for editing text and images in the UI.
• Engineers who need copy‑ready API examples and practical integration notes.

Edit text and images directly within PDF files using WebViewer's content editing feature.

Info: PDF Editing is a separate add-on and isn't included in a standard WebViewer license. To try it without the add-on, comment out your license key to run WebViewer in demo mode.

Warning: The PDF content editing feature only works with PDF files. To edit Word documents, try our DOCX Editor. For other file types, call the loadDocument() function with the loadAsPDF: true option. For example, documentViewer.loadDocument('myfile.xlsx', { loadAsPDF: true }).

Configure content edit

Before you begin using the content editing feature in the UI or programmatically, you must enable the following ContentEdit feature flag:

JavaScript

WebViewer({
  // options
}, document.getElementById('viewer'))
.then((instance) => {
  // Enable the tools to edit the PDF content
  instance.UI.enableFeatures([instance.UI.Feature.ContentEdit]);
});

Edit content in the UI

The following sections walk you through entering content edit mode and performing common editing tasks, such as updating text, replacing images, moving content, and resizing elements in the WebViewer UI.

Access content edit

Use these steps to access content edit mode in the WebViewer UI. Before you start, enable the content edit feature.

1. Load the viewer.
2. After the WebViewer UI loads, the Edit Text toolbar group appears.
3. Click Edit Text to enter content edit mode. Once in content edit mode, editable text and images appear with a dashed box around them. A Text Styles panel also opens with text editing tools and formatting controls.

Info: Entering PDF content edit mode changes how the viewer interprets clicks and keyboard input. Clicks inside dashed boxes edit content rather than selecting annotations.

Move, resize, or delete content

Use PDF content editing to modify the placement and size of existing content, or remove content you no longer need.

1. Move: Select the content box and drag it to a new location.
2. Resize: Drag a handle on the content box to adjust its width or height.
3. Delete: Press Delete or select Delete from the annotation popup.

Edit existing text

Use the content edit feature to edit text directly within a PDF and update formatting such as font, size, color, and alignment.

1. Locate the dashed box around the text you want to change.
2. Open the editor.
3. Double‑click the dashed box to enter inline edit mode. Optionally, single‑click to select the box, then click the edit button in the annotation popup.
4. Make changes using the inline editor or the right panel tools (font, size, color, alignment).
5. Depending on your configuration, commit changes by clicking outside the box or pressing Enter.

Info: While editing, the editor applies typed characters to the content box. When you finish, the page updates.

Add paragraphs

With PDF content editing, you can add new text content anywhere in the document by creating and formatting a paragraph box.

1. Click the Add Paragraph icon in the toolbar.
2. Click and drag on the page to draw a rectangle where you want the paragraph to appear.
3. Start typing inside the new box.
4. Use the right panel to set font, size, color, and alignment.

Use the Add Paragraph tool to place and format new text content in a PDF.

Add images

With content edit, you can add images to your document and position them where needed.

1. Click the Add Image icon in the toolbar.
2. Click the document where you want to place the image. The system file picker opens.
3. Select an image file. The image appears in a content box.
4. Resize or move the image as needed.

Edit content via API

If you're using WebViewer Core directly, content edit APIs are available for working with editable PDF content. For a practical example, see the webviewer-custom-ui GitHub sample, which uses these APIs.

API Change in WebViewer 12.2.0

Beginning with WebViewer 12.2.0, content edit APIs have moved from the ContentEdit namespace to the ContentEditManager namespace.

Manage content edit mode

For programmatic control, call the API to start and end content editing. Before you start, enable the content edit feature.

To begin editing content, call the startContentEditMode method. To end content edit mode, you can call the endContentEditMode method.

JavaScript (SDK v12.2+)

// Start content edit mode 
const { documentViewer }  =  instance.Core; 
const contentEditManager  =  documentViewer.getContentEditManager(); 
await contentEditManager.startContentEditMode(); 

// End content edit mode 
const { documentViewer } = instance.Core; 
const contentEditManager = documentViewer.getContentEditManager(); 
await contentEditManager.endContentEditMode(); 

The first time the tool mode switches to content edit mode, WebAssembly files will load. To do this earlier, use the preloadWorker method.

JavaScript

Core.ContentEdit.preloadWorker(myDocumentViewer);

Add paragraphs

Use the AddParagraphTool to add new paragraphs to the document. The following example switches the viewer to paragraph insertion mode.

JavaScript

const addParagraphTool = myDocumentViewer.getTool(Core.Tools.ToolNames.ADD_PARAGRAPH);
myDocumentViewer.setToolMode(addParagraphTool);

Add images

You can also add images by switching to the AddImageContentTool.

JavaScript

const addImageContentTool = myDocumentViewer.getTool(Core.Tools.ToolNames.ADD_IMAGE_CONTENT);
myDocumentViewer.setToolMode(addImageContentTool);

Identify annotations

You can tell if an annotation is a content edit placeholder annotation by using the annotation.isContentEditPlaceHolder API. With those annotations, you can use the getDocumentContent and updateDocumentContent APIs as in the following example.

JavaScript (SDK v12.2+)

const selectedAnnotation = annotationManager.getSelectedAnnotations()[0];

if (selectedAnnotation?.isContentEditPlaceholder?.()) {
  const contentEditManager = instance.Core.documentViewer.getContentEditManager();
  const textDetails = await contentEditManager.getContent(selectedAnnotation);
  // textDetails.xmlString or textDetails.spanObjects
  // pass/convert this to your editor format (e.g. Quill Delta)
}

JavaScript (SDK v10.7+)

// is the currently selected annotation a placeholder
const selectedAnnotation = annotationManager.getSelectedAnnotations()[0];
if (selectedAnnotation && selectedAnnotation.isContentEditPlaceholder()) {
  const content = await Core.ContentEdit.getDocumentContent(selectedAnnotation);

  // pass content to library that can display rich text, for example Quill
}


// later after the content has been updated this will update it on the page
await Core.ContentEdit.updateDocumentContent(annotation, newContent);

To check whether the annotation is for text or an image, use getContentEditType as in this example.

JavaScript

if (annotation.getContentEditType() === Core.ContentEditTypes.TEXT) {
  // this has text that can be updated
} else if (annotation.getContentEditType() === Core.ContentEditTypes.OBJECT) {
  // this has the image that can be updated
}

Move or delete content

When you move or delete the annotations representing the content in the DocumentViewer, the content updates automatically on the page. You can also use the normal annotation APIs.

JavaScript

annotationManager.deleteAnnotation(myContentEditAnnotation);

myOtherContentEditAnnotation.X = 50;
annotationManager.trigger(Core.AnnotationManager.Events.ANNOTATION_CHANGED, ['modify', [myOtherContentEditAnnotation], {}]);

Get text styles

When editing text in a content edit box, you can retrieve the current text attributes for the selected content. This is useful for updating UI controls or displaying formatting changes as the user moves through the text.

First, attach a function to the contentBoxEditStarted event to store the reference to the active content box editor.

JavaScript

const handleEditorStarted = ({ editor }) => {
  // Store this editor reference for use later.
  // We will assume that reference is a variable 'contentEditorRef'.
  contentEditorRef = editor;
};
contentEditManager.addEventListener('contentBoxEditStarted', handleEditorStarted);

Related links

• ContentEditManager#contentBoxEditStarted

Secondly, attach a function to the contentEditSelectionChange event. This function should call the referenced editor we stored earlier to retrieve the text attributes with the getTextAttributes method. Once we obtain the attributes from the current selection, we can extract the various properties.

JavaScript

const handleSelectionChange = async () => {
  if (contentEditorRef) {
    const attribute = await contentEditorRef.getTextAttributes();
    const { fontSize, fontName, fontColor, bold, italic, underline, textAlign } = attribute;
  }
};
contentEditManager.addEventListener('contentEditSelectionChange', handleSelectionChange);

Related links

• ContentEditManager#contentEditSelectionChange
• ContentBoxEditor#getTextAttributes

You can extract the text style (for example, font size and color) from a content edit box that isn't in edit mode. This process fetches the first instance of each property. For example, if a box has both 12-point and 30-point fonts, with the 12-point appearing first, the output will be 12 points.

To do this:

• Select an annotation.
• Obtain the contentEditBoxId.
• Request the content box attributes from the contentEditManager.

JavaScript

const contentBoxId = annotation.getCustomData('contentEditBoxId');
const contentEditManager = Core.getDocumentViewer().getContentEditManager();
const textAttributes = await contentEditManager.getContentBoxAttributes(contentBoxId);

Related links

• ContentEditManager#getContentBoxAttributes
• Annotation#getCustomData

Set text styles

Use the setTextAttributes API to apply font and text styling programmatically. The specified attributes are applied to newly entered text and remain active until changed by another API call or user selection.

JavaScript

const fontStyle = {
    "bold": false,
    "italic": false,
    "underline": true,
    "fontName": "Cousine",
    "fontSize": "12",
    "fontColor": "#FF00E8"
}
Core.ContentEdit.setTextAttributes(fontStyle);

Related links

• ContentEdit#setTextAttributes

Undo and redo changes

You can programmatically undo or redo changes made during PDF text edits. This functionality includes actions such as character additions/deletions, style modifications, and content box adjustments. These changes are managed through the ContentEditHistoryManager class.

JavaScript

// to undo a change
await Core.getDocumentViewer().getContentEditHistoryManager().undo();
// to redo a change
await Core.getDocumentViewer().getContentEditHistoryManager().redo();
// to check if there is an available change to undo
const canUndo = Core.getDocumentViewer().getContentEditHistoryManager().canUndo();
// to check if there is an available change to redo
const canRedo = Core.getDocumentViewer().getContentEditHistoryManager().canRedo();

Related links

• ContentEditHistoryManager#undo
• ContentEditHistoryManager#redo
• ContentEditHistoryManager#canUndo
• ContentEditHistoryManager#canRedo

The undo() function reverses the most recent change, while the redo() function re-applies a previously undone change. Before performing an action, use the canUndo() and canRedo() functions to determine whether an undo or redo operation is available.

Detect link annotations

Starting with WebViewer 10.7, a link annotation popup appears when you hover over a link annotation. The popup shows the link URL and lets you remove the link from the document.

Add hyperlinks to PDF text directly within the content edit editor.

Currently, there is no direct API to remove a hyperlink added in content edit mode. However, you can use an alternative approach to detect the link annotation, store it, and then delete it.

To detect the link annotation, utilize the mouseMove event in conjunction with the available API getAnnotationsByMouseEvent.

JavaScript

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('mouseMove', evt => {
      const annotations = Core.getAnnotationManager().getAnnotationsByMouseEvent(evt, true);
      const linkAnnot = annotations.find((annot) => annot instanceof window.Core.Annotations.Link);
    });
  });

Related links

• AnnotationManager.getAnnotationsByMouseEvent

Delete link annotations

Link annotations can originate from hyperlinks added in WebViewer, links created in content edit mode, or URLs already embedded in the document. Regardless of how a link annotation was created, you can remove it using the deleteAnnotations method. Note that link styling remains visible after you delete the annotation.

The following example removes link annotations generated by WebViewer.

JavaScript

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { annotationManager } = instance.Core;
    const linkAnnotations = annotationManager.getAnnotationsList().filter((annot) => annot instanceof window.Core.Annotations.Link);
    // add {'source': 'unlink'} to let content edit worker know to refresh cached data
    annotationManager.deleteAnnotations(linkAnnotations, { 'source': 'unlink' });
  });

Related links

• WebViewerInstance
• AnnotationManager.getAnnotationsList
• AnnotationManager.deleteAnnotations
• AnnotationManager.getGroupAnnotations
• AnnotationManager.ungroupAnnotations