Document Editing UI

The Document Editor is a PSPDFKit for Web component that enables a whole host of document editing features. This includes new page creation, page duplication, copying and pasting, reordering, rotation, deletion, and the creation of new documents from a subset of selected pages.

This guide describes the built-in document editing user interface. If you would prefer to learn more about the document editing APIs, please check out the Document Editor guide.

ℹ️ Note: The Document Editor UI is only available if document editing is enabled in your license.

Entering Document Editing Mode

To enter document editing mode, you need to press the Document Editor toolbar button, which is placed on the main toolbar.

The image below shows the button used to switch to document editing mode.

The document editor button from the main toolbar

User Interface

The Document Editor user interface is comprised of two main elements: the Document Editor toolbar, which is by default positioned on the very top; and the document view, which shows thumbnails of all the pages in a document.

Toolbar

The Document Editor toolbar holds a set of buttons that can be used to perform document editing actions. Some of the buttons are context sensitive and are enabled only on demand, based on factors such as the selection state in the document view. See Actions for a detailed description of all the actions you can perform with these buttons.

Document View

The document view is a vertically scrollable grid that represents all the pages in an edited document. Pages can be selected or deselected by single-pressing a page’s thumbnail. It is possible to select more than one page at the same time. You can identify selected pages by paying attention to the thumbnail outline.

Actions

There are many actions you can perform using the Document Editor toolbar. The toolbar icons will appear horizontally stacked next to their label, unless there’s not enough space for all of them, in which case some of them may be grouped in a dropdown menu at the end of the toolbar, like shown below.

The following table lists all toolbar buttons.

Icon Name Description
Add Adds a new page at the beginning of the document or after the selected page.
Remove Removes the currently selected pages from the document.
Duplicate Creates copies of currently selected pages.
Rotate left Rotates the selected page 90 degrees counter-clockwise.
Rotate right Rotates the selected page 90 degrees clockwise.
Move left Moves the selected page before the previous page.
Move right Moves the selected page after the next page.
Merge Merge Shows the open file dialog and merges the selected document into the current one.
Undo Undoes the last document editing action.
Redo Redoes the last undone document editing action.
Select all Selects all pages.
Select none Deselects all pages.

In the lower side of the Document Editor UI, there are three more buttons available.

Name Description
Cancel Exits the Document Editor UI without applying any operation to the current document.
Save Applies the modifications to the current document.
Save as Shows a save file dialog to export the current document with the modifications applied but without modifying the current document.