Edit PDF text using our JavaScript content editor

Beginning with Nutrient Web SDK 2022.5, you can edit text directly in PDF documents with the built-in user interface (UI). You can also change text color, font type, and font size.

License

Content editing is a licensed feature. Contact Sales to add it to your license.

Enabling content editing

To enable content editing, add the content-editor toolbar item to your toolbar when you load the Nutrient Web SDK viewer:

NutrientViewer.load({
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "content-editor", dropdownGroup: "editor" }
  ]
});

Alternatively, to enable content editing after loading a document, set the interaction mode to NutrientViewer.InteractionMode.CONTENT_EDITOR:

instance.setViewState((v) =>
  v.set("interactionMode", NutrientViewer.InteractionMode.CONTENT_EDITOR)
);

Managing UI content editing sessions programmatically

These methods apply once content editing is enabled, whether via setViewState or the toolbar button. Use them to save or discard changes, check for unsaved modifications, and delete text blocks. The read methods below work against whichever session is live.

Saving changes

To save all changes made in the UI content editing session and exit content editing mode, use instance#saveContentEditingSession(). This is the programmatic equivalent of clicking Save & Close in the toolbar:

await instance.saveContentEditingSession();

Discarding changes

To discard all changes and exit content editing mode without saving, use instance#discardContentEditingSession(). This is the programmatic equivalent of clicking Cancel in the toolbar:

await instance.discardContentEditingSession();

Checking for unsaved changes

To check whether the current UI content editing session has unsaved changes, use instance#hasUnsavedContentEditingChanges(). This method returns false if no UI content editing session is active:

if (instance.hasUnsavedContentEditingChanges()) {
  console.log("There are unsaved content editing changes.");
}

Transitioning to another mode after saving

Since saveContentEditingSession() exits content editing mode, you can chain it with setViewState to transition directly to another interaction mode:

await instance.saveContentEditingSession();
instance.setViewState((v) =>
  v.set("interactionMode", NutrientViewer.InteractionMode.PAN)
);

Reading and deleting text blocks

Read every loaded block with contentEditor.getBlocks(), the blocks on one page with contentEditor.getBlocks(pageIndex), and a single block with contentEditor.getBlock(), which returns null when no block on the live session has that ID. All are synchronous:

const blocks = instance.contentEditor.getBlocks(0);

Both read whichever session is live and report only the blocks detected on it so far. Detection runs per page and asynchronously. A page reports an empty array until its own detection resolves, including the page onscreen immediately after the editor opens. Under the UI session, no public event reports when a page finishes. The contentEditor.stateChange payload carries session and block state only, and identical snapshots are deduplicated before it fires. An empty array and a page genuinely without text therefore look the same. Under the programmatic session from instance#beginContentEditingSession(), session.getTextBlocks() is awaitable and resolves once that page is populated. That read cannot be paired with deletion, because contentEditor.deleteBlock() runs only on the UI session.

Narrow on block.type before reading text. Then pass each block’s ID to contentEditor.deleteBlock():

const targets = instance.contentEditor
  .getBlocks(0)
  .filter((block) => block.type === "text" && block.text.includes("Draft"));

for (const target of targets) {
  try {
    await instance.contentEditor.deleteBlock(target.id);
  } catch (error) {
    // Rejects when the UI session is inactive, or when the ID is already stale.
    console.error("Failed to delete a block:", error.message);
  }
}

await instance.saveContentEditingSession();

Save once, after the deletions. instance#saveContentEditingSession() ends the session on success, so a save inside the loop leaves every later call with no session to act on. If the save itself fails, the promise still resolves and the session stays open and dirty. Server-backed instances show a prompt in the viewer, while Standalone reports the failure only to the console. A save aborted by an earlier failed block operation is the exception: That one reaches the console on both.

The catch covers an inactive session and a stale ID. It doesn’t cover a deletion that fails while being applied to the document. The block leaves contentEditor.getBlocks() either way, and the failure surfaces later as an aborted save.

To delete the block that’s currently selected or focused, call contentEditor.deleteActiveBlock().

For the headless state surface and the contentEditor.stateChange event, refer to the headless content editor guide. The full member list lives in the API reference.

Editing text in a PDF using the built-in UI

To edit text in a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click within a text box on the page.
3. Add or delete content in the text box.
4. Change the text color, font type, or font size in the toolbar.
5. Click Save & Close in the toolbar to apply the changes.

Adding a new paragraph to a PDF using the built-in UI

To add a new paragraph to a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click the Add text box icon in the toolbar.
3. Click the place on the page where you want to add the new paragraph.
4. Start typing to add text to the new paragraph.

Deleting a paragraph from a PDF using the built-in UI

To delete a paragraph from a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click within a text box on the page.
3. Click the Delete paragraph icon in the toolbar. Alternatively, press Delete or Backspace.

Supported text editing functionalities

The following text editing functionalities are supported:

• Text styling — Add or modify text using any font size, color, or font type supported by Nutrient Web SDK, including bold and italic formatting via toolbar or keyboard shortcuts.
• Selection and clipboard actions — Select text via mouse or keyboard shortcuts (Control/Command-A) and perform standard clipboard actions (Cut, Copy, and Paste).
• Text box manipulation — Adjust the size and location of text boxes within the document.

Limitations

Currently, the content editor only supports left-to-right (LTR) text.

Editing text in a PDF programmatically

To edit PDF text content programmatically, refer to our guide on the PDF content editing API for Web.