This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/features/saving.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Autosave PDF changes in JavaScript viewer | Nutrient SDK

Autosaving PDF changes in our JavaScript viewer

Markdown version of this page, suitable for AI agents and automation

Nutrient Web SDK allows modification of multiple domain objects. These objects include annotations, bookmarks, comments, form fields, and form field values.

Standalone

In standalone mode of Nutrient Web SDK, changes stay in memory until you export them. Standalone mode still distinguishes saved changes from unsaved ones, using the same persisting logic as other modes. The exported Instant JSON includes only saved changes. See the guide on importing and exporting for more information.

Server-backed

When using the Nutrient Web SDK server-backed operational mode, local changes are always synced to the Document Engine backend by default. This means you can always use the backend API to interact with these objects. This autosave behavior can be set by the Configuration#autoSaveMode configuration option.

Before the change is sent to Document Engine, it receives a stable ID (ULID(opens in a new tab)). This ID is also used by Document Engine, and it enables you to track updates that happen before Document Engine responds. If you need to confirm that Document Engine saved a local change, use the Instance#ensureChangesSaved method:

NutrientViewer.load(configuration).then(async (instance) => {
  const createdAnnotations = await instance.create(newAnnotation);
  const [savedAnnotation] = await instance.ensureChangesSaved(
    createdAnnotations
  );
  console.log(savedAnnotation.id);
});

Configuration#autoSaveMode

If nothing else is configured, Nutrient Web SDK will have auto save enabled. This means that local changes are automatically synced. You can use Configuration#autoSaveMode to configure exactly when saving occurs.

Save modeUse case
defaultIn standalone mode, autoSaveMode defaults to NutrientViewer.AutoSaveMode.IMMEDIATE. In server-backed mode, it defaults to NutrientViewer.AutoSaveMode.IMMEDIATE when Configuration#instant is true, and to NutrientViewer.AutoSaveMode.INTELLIGENT otherwise.
NutrientViewer.AutoSaveMode.IMMEDIATEChanges are saved whenever something changes, as long as they’re in a valid state. This is useful for real-time updates but increases server load.
NutrientViewer.AutoSaveMode.INTELLIGENTChanges are saved whenever a complete operation is detected. This merges multiple operations into one server request and saves, for example, on deselect.
NutrientViewer.AutoSaveMode.DISABLEDChanges are saved only when Instance#save runs. An Instance#exportPDF export doesn’t include unsaved annotations. In standalone mode, unsaved form field values may already be present, because NutrientViewer.Options.PDF_JAVASCRIPT is enabled by default.

This isn’t unique to NutrientViewer.AutoSaveMode.DISABLED. Under NutrientViewer.AutoSaveMode.INTELLIGENT, an undo, redo, paste, or redaction queues an annotation change without saving it, and Instance#exportPDF doesn’t flush that queue. Call Instance#save before you export, or Instance#ensureChangesSaved to wait for specific changes.

Here’s an example of how to set the autoSaveMode in the configuration object passed to NutrientViewer.load():

NutrientViewer.load({ autoSaveMode: NutrientViewer.AutoSaveMode.INTELLIGENT });

Reacting to unsaved changes

You can check to see if there are any unsaved changes by calling Instance#hasUnsavedChanges.

If you wish to react to save state changes, you can register listeners for the document.saveStateChange event. The emitted event contains the hasUnsavedChanges property with the current value returned by the Instance#hasUnsavedChanges method:

instance.addEventListener("document.saveStateChange", (event) => {
  console.log(`Save state changed: ${event.hasUnsavedChanges}`);
});