---
title: "JavaScript PDF content editor: Edit PDF text | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/editor/edit-text/"
md_url: "https://www.nutrient.io/guides/web/editor/edit-text.md"
last_updated: "2026-06-10T00:00:00.000Z"
description: "Edit text in PDFs with our JavaScript PDF content editor. Modify fonts, sizes, and colors through an intuitive user interface (UI), enhancing your PDF editing capabilities."
---

# Edit PDF text using our JavaScript content editor

Starting with [Nutrient Web SDK 2022.5](https://www.nutrient.io/blog/pspdfkit-web-2022-5-content-editor-and-measurement-tools/), you can edit text directly in PDF documents using the built-in user interface (UI). You can also change text color, font type, and font size.

[Try for free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch demo](https://www.nutrient.io/demo/content-editor)

## License

Content editing is a licensed feature. [Contact Sales](https://www.nutrient.io/contact-sales/) to add it to your license.

Text editing is available when using [Web SDK](https://www.nutrient.io/guides/web.md) with [Document Engine](https://www.nutrient.io/guides/document-engine.md). For more information, refer to the [operational mode](https://www.nutrient.io/guides/web/about/operational-modes.md) guide.








## Enabling content editing

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

```js

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

```

Alternatively, to enable content editing after loading a document, set the [interaction mode](https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md#interaction-mode) to [`NutrientViewer.InteractionMode.CONTENT_EDITOR`](https://www.nutrient.io/api/web/NutrientViewer.html#.InteractionMode):

```js

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

```

## Managing UI content editing sessions programmatically

When content editing is enabled via [`setViewState`](https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api/#interaction-mode) or the toolbar button, you can programmatically save or discard changes and check for unsaved modifications using the following instance methods.

### Saving changes

To save all changes made in the UI content editing session and exit content editing mode, use [`instance#saveContentEditingSession()`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#saveContentEditingSession). This is the programmatic equivalent of clicking **Save & Close** in the toolbar:

```js

await instance.saveContentEditingSession();

```

### Discarding changes

To discard all changes and exit content editing mode without saving, use [`instance#discardContentEditingSession()`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#discardContentEditingSession). This is the programmatic equivalent of clicking **Cancel** in the toolbar:

```js

await instance.discardContentEditingSession();

```

### Checking for unsaved changes

To check whether the current UI content editing session has unsaved changes, use [`instance#hasUnsavedContentEditingChanges()`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#hasUnsavedContentEditingChanges). This method returns `false` if no UI content editing session is active:

```js

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`](https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api/#interaction-mode) to transition directly to another interaction mode:

```js

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

```

## 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](https://www.nutrient.io/guides/web/editor/content-editor-api.md).
---

## Related pages

- [Add Bates numbering in PDFs using JavaScript](/guides/web/editor/add-bates-number.md)
- [Add images to PDFs using JavaScript](/guides/web/editor/add-image.md)
- [Process documents via Document Engine or DWS API using JavaScript](/guides/web/editor/backend-processing.md)
- [PDF editing toolbar and UI](/guides/web/features/document-editor-ui.md)
- [Add pages to PDFs using JavaScript](/guides/web/editor/add-page.md)
- [PDF content editing API for Web](/guides/web/editor/content-editor-api.md)
- [Headless PDF editor](/guides/web/features/document-editor.md)
- [JavaScript PDF editor library](/guides/web/editor.md)
- [Merge PDF files using JavaScript](/guides/web/editor/merge-or-combine.md)
- [Edit page labels in a PDF](/guides/web/editor/page-label.md)
- [Replace text in PDFs using JavaScript](/guides/web/editor/replace-text.md)
- [Split PDFs using JavaScript](/guides/web/editor/split.md)