Edit text in a PDF using JavaScript

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

Try for free Launch demo

Information

Text editing is available when using the Web SDK with Document Engine in server-backed operational mode.

License

To edit text directly in PDF documents, contact Sales to add content editing to your license.

Enabling content editing

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

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

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

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

Editing text in a PDF using the built-in UI

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

  1. In the toolbar, click Content Editor.

  2. Click within a text box on the page.

  3. Add or delete content in the text box.

  4. In the toolbar, change the text color, font type, or font size.

  5. In the toolbar, click Save 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 these steps:

  1. In the toolbar, click Content Editor.

  2. In the toolbar, click the Add text box icon.

  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 these steps:

  1. In the toolbar, click Content Editor.

  2. Click within a text box on the page.

  3. In the toolbar, click the Delete paragraph icon. Alternatively, press Delete or Backspace.

Supported text editing functionalities

The following text editing functionalities are supported:

  • Adding new text and changing existing text using the colors and font types supported by Nutrient.

  • Adding new text and changing existing text using any font size.

  • Adding bold and italic text and changing existing text to bold and italic.

  • Selecting text with the mouse or with the key combination Control-A (Windows) or Command-A (macOS).

  • Changing the size of a text box.

  • Changing the location of a text box.

Limitations

Text editing currently comes with the following limitations:

  • You can only edit left-to-right (LTR) text.