---
title: Save and Restore a Survey JSON Schema
product: Survey Creator
description: Learn how to automatically save changes made in your form contents and its settings or make the Save button visible and let users save new configurations manually. View a free demo example for JavaScript to learn more.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Save and Restore a Survey JSON Schema (Vanilla JS)

Survey Creator produces survey model schemas as JSON objects. You can persist these objects on your server or in the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">`localStorage`</a> so that users can restore them and continue designing the survey from where they left off. In this example, Survey Creator automatically saves survey JSON schemas in the `localStorage`. To try this functionality, modify the survey and reload the page&mdash;your changes will remain.

## Persist Survey JSON Schemas

To save a survey JSON schema, implement the [`saveSurveyFunc`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#saveSurveyFunc) function. It accepts two arguments:

- `saveNo`      
An incremental number of the current change. Since web services are asynchronous, you cannot guarantee that the service receives the changes in the same order as the client sends them. For example, change #11 may arrive to the server faster than change #10. In your web service code, update the storage only if you receive changes with a higher `saveNo`.

- `callback`        
A callback function. Call it and pass `saveNo` as the first argument. Set the second argument to `true` or `false` based on whether the server applied or rejected the change.

You can access the raw survey JSON schema using the `SurveyCreatorModel`'s [`JSON`](/survey-creator/documentation/api-reference/survey-creator#JSON) property or its stringified version using the [`text`](/survey-creator/documentation/api-reference/survey-creator#text) property. Save the content of one of these properties to the preferred storage.

## Enable Auto-Save

The `saveSurveyFunc` function is called each time a survey JSON schema needs to be saved. Users can run the save operation by clicking the Save button in the toolbar. Alternatively, you can enable auto-save. This feature starts the save operation when the survey JSON schema is modified.

To activate auto-save, set the [`autoSaveEnabled`](/survey-creator/documentation/api-reference/survey-creator#autoSaveEnabled) property to `true`, as shown in this demo. Note that the Save button becomes unavailable. To avoid overloading the server with frequent requests, survey modifications are saved with a 500 ms delay. You can use the [`autoSaveDelay`](/survey-creator/documentation/api-reference/survey-creator#autoSaveDelay) property to increase or decrease this value.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const creator = new SurveyCreator({ autoSaveEnabled: true });

const localStorageKey = "survey-json-example";

creator.saveSurveyFunc = (saveNo, callback) => {
    window.localStorage.setItem(localStorageKey, creator.text);
    callback(saveNo, true);

    // If you use a web service:
    // saveSurveyJson(
    //     "https://your-web-service.com/",
    //     creator.JSON,
    //     saveNo,
    //     callback
    // );
}

const defaultJSON = {
  pages: [{
    name: 'page1',
    elements: [{
      type: 'text',
      name: "q1"
    }]
  }]
};

creator.text = window.localStorage.getItem(localStorageKey) || JSON.stringify(defaultJSON);

// If you use a web service:
// function saveSurveyJson(url, json, saveNo, callback) {
//   fetch(url, {
//     method: 'POST',
//     headers: {
//       'Content-Type': 'application/json;charset=UTF-8'
//     },
//     body: JSON.stringify(json)
//   })
//   .then(response => {
//     if (response.ok) {
//       callback(saveNo, true);
//     } else {
//       callback(saveNo, false);
//     }
//   })
//   .catch(error => {
//     callback(saveNo, false);
//   });
// }
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-js": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/jquery.md)