Cart Licenses Contact Support Online Creator Log in/Register
v 1.9.44

Set and save survey


const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
//Automatically save survey definition on changing. Hide "Save" button
creator.isAutoSave = true;
//Show state button here
creator.showState = true;

var localStorageName = "SaveLoadSurveyCreatorExample";
//Setting this callback will make visible the "Save" button
creator.saveSurveyFunc = function(saveNo, callback) {
    //save the survey JSON
    //You can store in your database JSON as text: creator.text  or as JSON: creator.JSON
    window.localStorage.setItem(localStorageName, creator.text);

    //We assume that we can't get error on saving data in local storage
    //Tells creator that changing (saveNo) saved successfully.
    //Creator will update the status from Saving to saved
    callback(saveNo, true);

var defaultJSON = { pages: [{ name:'page1', elements: [{ type: 'text', name:"q1"}]}]};
creator.text = window.localStorage.getItem(localStorageName) || JSON.stringify(defaultJSON);
//If you get JSON from your database then you can use creator.JSON property
//creator.JSON = yourJSON;
<!DOCTYPE html>
<html lang="en">
    <title>Set and save survey, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></script>
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

<script type="text/babel" src="./index.js"></script>


Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.