Editor Options
Use options to customize the editor
Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

var editorOptions = { };
var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);

<!DOCTYPE html>
    <title>Use options to customize the editor, SurveyJS Editor Example</title>
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="/bundles/prettydiff?v=E3KTA7j8SjgR8NaAhm1jADBJxbWj5Yx1GQ2EdHBzuxE1"></script>

    <script src="https://surveyjs.azureedge.net/0.98.1/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-json.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-json.js" type="text/javascript" charset="utf-8"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link href="https://surveyjs.azureedge.net/0.98.1/surveyeditor.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/0.98.1/surveyeditor.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./index.css">

        <div id="surveyContainer">
        <div id="editorElement"></div>

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

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
.panel-footer {
    padding: 0 15px;
    text-align: right;
    background-color: #fff;

Survey options

You may:
  • Show/hide survey tabs.
  • Show/hide options menu button and turn-on valid JSON generation
  • Limit question types you want to have in the toolbox
  • Set the designer height

Show/hide survey tabs.

By default, "Survey Designer", "JSON Editor" and "Test Survey" are visible. "Embed Survey" tab is invisible. The following boolean properties in editorOptions give you the control under them. Please note, that there is no property for "Survey Designer" tab. You can't make it invisible.
  • showJSONEditorTab - Show/hide JSON editor tab. It is true by default.
  • showTestSurveyTab - Show/hide Test Survey tab. It is true by default.
  • showEmbededSurveyTab - Show/hide a tab that shows how to embed the survey into your web page. It is false by default.
var editorOptions = {showJSONEditorTab: false};
//There will be two tabs visible: "Survey Designer" and "Test Survey"
var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);

Show/hide options menu button and turn-on valid JSON generation.

There is an Options menu button in the editor. You may see it here. It is invisible by default and in the most cases you do not need it showing it to your end-users. However, you may decide to generate a valid JSON, instead of JSON5. The SurveyJS editor generates JSON5 json by default.
  • generateValidJSON - Generate valid JSON if it is true and a JSON5 - modern, user-friendly if it is false. It is false by default and as result, the generated JSON is not VALID.
  • showOptions - Show/hide options menu button, it is false by default.
  • Limit question types you want to have in the toolbox

    You may limit question types your end-users may use in the editor. The following example show how to show in the toolbox only four question types.
    var editorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
    var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);
    There are more possibilities for toolbox customization. Please go to this demo to learn more about toolbox customization API.

    Set the designer height

    By default the designer height is "75vh". You may find it in the surveyeditor.css. You may set the designer height via options. The following examples set the designer height to 700px:
    var editorOptions = {designerHeight: "700px"};
    var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);

    Change tabs visibility using editorOptions

    JSON tab, options.showJSONEditorTab:

    Test Survey tab, options.showJSONEditorTab:

    Embeded Survey tab, options.showEmbededSurveyTabValue:

    editorOptions.showJSONEditorTab = yourJSONTabValue;
    editorOptions.showTestSurveyTab = yourTestSurveyValue;
    editorOptions.showEmbededSurveyTab = yourEmbededSurveyValue;
    editor.render(null, editorOptions);