Add Survey Editor into your page

Or use npm

npm install surveyjs-editor

Step 2

Add links to external libraries:

Bootstrap

jQuery

KnockoutJS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

Step 3

Add links to surveyjs.editor and surveyjs libraries

Add link to editor classes.
<link href="https://surveyjs.azureedge.net/0.12.34/surveyeditor.css" type="text/css" rel="stylesheet" />
Link to the knockout version of the library.
<script src="https://surveyjs.azureedge.net/0.12.34/survey.ko.min.js"></script>
<script src="https://surveyjs.azureedge.net/0.12.34/surveyeditor.min.js"></script>

Step 4

Show Survey Editor on the page

Inside your web page

<div id="surveyEditorContainer"></div>
var editorOptions = {showEmbededSurveyTab: true}; //see examples below
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);
//set function on save callback
editor.saveSurveyFunc = saveMySurvey;

Step 5

Save and load surveys

Save survey

function saveMySurvey(){
  var yourNewSurveyJSON = editor.text;
  //send updated json in your storage  
}

Set Survey JSON directly

editor.text = yourSurveyJSON;

Load Survey from dxsurvey.com

editor.loadSurvey(yourSurveyId);

Step 6

Customize Editor via options

var editorOptions = {
 // show the embeded survey tab. It is hidden by default
 showEmbededSurveyTab : true,
 // hide the test survey tab. It is shown by default
 showTestSurveyTab : false,
 // hide the JSON text editor tab. It is shown by default
 showJSONEditorTab : false,
 // show the "Options" button menu. It is hidden by default 
 showOptions: true                          
};
// pass the editorOptions into the constructor. It is an optional parameter.
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);

Step 7

Optionally use Ace Code Editor, instead of textarea

Optionally use Select2, instead of standard select for element selector

Add link to ace editor library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-json.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-json.js" type="text/javascript"></script>
Add link to select2 jQuery plugin.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" type="text/javascript"></script>