Edit Text in a PDF Using JavaScript

Starting with PSPDFKit for Web 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.

Launch Demo

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 PSPDFKit:

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.

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 PSPDFKit.

  • 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).

Limitations

Text editing currently comes with the following limitations:

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

  • You cannot change the size of text boxes.