PDF Editing Toolbar and 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.

Launch Demo

This guide describes the built-in document editing user interface (UI). If you want to learn more about document editing APIs, refer to the document editing guide.

Information

The Document Editor UI is only available if document editing is enabled in your license.

Entering Document Editing Mode Programmatically

The Document Editor’s UI is integrated into PSPDFKit.ViewState.InteractionMode as a separate interaction mode. To switch to the document editing view, change the view mode to PSPDFKit.ViewState.InteractionMode.DOCUMENT_EDITOR:

instance.setViewState(viewState =>
  viewState.set(
    "interactionMode",
    PSPDFKit.InteractionMode.DOCUMENT_EDITOR
  )
);

If your license has the document editing component, PSPDFKit.defaultToolbarItems includes a PSPDFKit.ToolbarItem, which can be used to facilitate switching to document editing mode via the UI. This button is added to the main toolbar.

You can remove it from the UI by setting the corresponding PSPDFKit.Configuration.toolbarItems value:

PSPDFKit.load({
  toolbarItems: PSPDFKit.defaultToolbarItems.filter(
    toolbarItem => toolbarItem.type !== "document-editor"
  )
});

Entering Document Editing Mode via the UI

To enter document editing mode, 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’s possible to select more than one page at the same time. You can identify selected pages by paying attention to the thumbnail outline.

Thumbnail Zoom Controls

The document view thumbnails size can be controlled by using the dedicated zoom control buttons in the toolbar or by using the keyboard shortcuts Command/Control + and Command/Control -, or Command/Control 0 to reset to the default thumbnail size.

The minimum, maximum, and default sizes for thumbnails can be defined programmatically by providing the PSPDFKit.Configuration#documentEditorConfiguration configuration option when loading an instance, which offers a tailored viewing experience. This flexibility ensures the Document Editor UI can accommodate user preferences:

PSPDFKit.load({
	documentEditorConfiguration: {
		thumbnailMinSize: 50,
		thumbnailMaxSize: 600,
		thumbnailDefaultSize: 300,
	},
})

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 the 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 the 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.
Import document Import document Shows the open file dialog and merges the selected document into the current one.
Extract pages Extract pages Downloads a new document that includes only the currently selected pages.
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.
Zoom out Decrease thumbnail size.
Zoom in Increase thumbnail size.
Information

To prevent user mistakes, it isn’t possible to import the same document more than once in the same Document Editor UI operations block. However, it’s still possible to do it programmatically. Refer to the document editing guide for more information.

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.