--- title: "Auto-save PDF changes in JavaScript viewer | Nutrient SDK" canonical_url: "https://www.nutrient.io/guides/web/features/saving/" md_url: "https://www.nutrient.io/guides/web/features/saving.md" last_updated: "2026-05-15T19:10:05.100Z" description: "Nutrient Web SDK allows modification of multiple domain objects. These objects include annotations, bookmarks, comments, form fields, and form field values." --- # Auto-saving PDF changes in our JavaScript viewer 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](https://www.nutrient.io/guides/web/about/operational-modes.md) of Nutrient Web SDK, changes will be stored in memory until they’re exported. The same persisting steps are traversed, which means we still differentiate between saved and unsaved changes, and exported Instant JSON will only contain changes that were saved. See the guide on [importing and exporting](https://www.nutrient.io/guides/web/importing-exporting/instant-json.md) for more information. ## Server-backed When using the Nutrient Web SDK server-backed [operational mode](https://www.nutrient.io/guides/web/about/operational-modes.md), local changes are always synced to the Document Engine backend by default. This means you can always use the [backend API](https://www.nutrient.io/api/reference/document-engine/upstream/) to interact with these objects. This auto-save behavior can be set by the [`Configuration#autoSaveMode`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#autoSaveMode) configuration option. Before the change is sent to Document Engine, we assign a stable ID ([ULID](https://github.com/alizain/ulid/)). This ID is also used by Document Engine, and it allows you to track updates that happen before Document Engine responds. If you’d like to ensure a local change has been saved by Document Engine, you can use the [`Instance#ensureChangesSaved`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#ensureChangesSaved) method: ```js 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`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#autoSaveMode) to configure exactly when saving occurs. | Save mode | Use case | | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | _default_ | If [`Configuration#instant`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#instant) is `true`, `autoSaveMode` defaults to [`NutrientViewer.AutoSaveMode.IMMEDIATE`](https://www.nutrient.io/api/web/NutrientViewer.html#.AutoSaveMode). Otherwise, it defaults to [`NutrientViewer.AutoSaveMode.INTELLIGENT`](https://www.nutrient.io/api/web/NutrientViewer.html#.AutoSaveMode). | | [`NutrientViewer.AutoSaveMode.IMMEDIATE`](https://www.nutrient.io/api/web/NutrientViewer.html#.AutoSaveMode) | Changes 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.INTELLIGENT`](https://www.nutrient.io/api/web/NutrientViewer.html#.AutoSaveMode) | Changes are saved whenever we detect a complete operation. This merges multiple operations into one server request and saves, for example, on deselect. | | [`NutrientViewer.AutoSaveMode.DISABLED`](https://www.nutrient.io/api/web/NutrientViewer.html#.AutoSaveMode) | Changes aren’t saved by default. You can use [`Instance#save`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#save) to trigger a save manually whenever you want. | Here’s an example of how to set the `autoSaveMode` in the configuration object passed to [`NutrientViewer.load()`]: ```js 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`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#hasUnsavedChanges). If you wish to react to save state changes, you can register listeners for the [`document.saveStateChange`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~SaveStateChangeEvent) event. The emitted event contains the `hasUnsavedChanges` property with the current value returned by the [`Instance#hasUnsavedChanges`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#hasUnsavedChanges) method: ```js instance.addEventListener("document.saveStateChange", (event) => { console.log(`Save state changed: ${event.hasUnsavedChanges}`); }); ``` --- ## Related pages - [Save documents as PDFs on the web](/guides/web/save-a-document/save-as.md) - [Detecting unsaved changes in PDFs](/guides/web/save-a-document/detect-unsaved-changes.md) - [Enable incremental saving of PDFs using JavaScript](/guides/web/features/document-processing.md) - [Save PDF files using JavaScript](/guides/web/save-a-document.md) - [Save PDFs to Document Engine using JavaScript](/guides/web/save-a-document/to-document-engine.md) - [Save PDFs to an ArrayBuffer using JavaScript](/guides/web/save-a-document/to-arraybuffer.md) - [Save PDF without annotations using JavaScript](/guides/web/save-a-document/without-annotations.md) - [Save PDFs to a remote server using JavaScript](/guides/web/save-a-document/to-remote-server.md) - [Save PDFs to local storage using JavaScript](/guides/web/save-a-document/to-local-storage.md)