---
title: Customize the Designer and Preview Tabs
product: Survey Creator
description: Survey Creator is an extensible UI form-building tool that allows you to adjust its look and functionality any way you want. This JavaScript example shows how to customize Survey Creator Designer and Preview tabs.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/customize-form-builder-ui/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Customize the Designer and Preview Tabs (Vanilla JS)

The Survey Creator UI is [built upon regular surveys](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid) from the SurveyJS Form Library. To customize the UI, access the internal surveys within the [`onSurveyInstanceSetupHandlers`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceSetupHandlers) event handler and use the [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) API. For example, this demo handles the `SurveyModel`'s [`onGetQuestionTitleActions`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetQuestionTitleActions) event to add a custom button to question titles. In the Designer tab, this button opens a configuration dialog, while in the Preview tab, it displays an alert box with a specified message.

## 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
.sv-property-editor .sd-root-modern {
    min-width: 640px;
}
```

### `src/survey_json.js`

```js
export const surveyJSON = {
  "title": "Software Developer Survey",
  "elements": [
    {
      "type": "checkbox",
      "name": "os",
      "title": "What operating system(s) do you use on your work computer(s)?",
      "popupDescription": "Please select all that apply.",
      "choices": [ "Windows", "Linux", "Macintosh OSX" ],
      "showOtherItem": true,
      "otherText": "Other (specify)"
    },
    {
      "type": "checkbox",
      "name": "languages",
      "title": "What programming language(s) do you use at work?",
      "popupDescription": "Select all programming languages that you've used in the last six months.",
      "choices": [
        "JavaScript", "Java", "Python", "CSS",
        "PHP", "Ruby", "C++", "C",
        "Shell", "C#", "Objective-C", "R",
        "VimL", "Go", "Perl", "CoffeeScript",
        "TeX", "Swift", "Scala", "Emacs Lisp",
        "Haskell", "Lua", "Clojure", "MATLAB",
        "Arduino", "Makefile", "Groovy", "Puppet",
        "Rust", "PowerShell"
      ],
      "showOtherItem": true,
      "otherText": "Other (specify)",
      "colCount": 4,
      "maxSelectedChoices": 3
    }
  ]
};
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { SurveyModel, Serializer, settings } from "survey-core";
import { surveyJSON } from "./survey_json";
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

Serializer.addProperty("question", {
    name: "popupDescription:text",
    category: "general",
    visibleIndex: 1
});

const popupJson = {
  "elements": [
    {
      "type": "comment",
      "name": "popupDescription",
      "titleLocation": "hidden"
    }
  ],
  "showNavigationButtons": false,
  "widthMode": "responsive"
};
    
const popupSurvey = new SurveyModel(popupJson);

function addLearnMoreButton(options, isDesigner) {
    options.titleActions = [{
        tooltip: isDesigner ? "Configure pop-up description" : "Learn more",
        iconName: isDesigner ? "icon-toolbox-customquestion-24x24" : "icon-hint-24x24",
        action: () => {
            const desc = options.question.popupDescription;
            if (isDesigner) {
                settings.showDialog({
                    componentName: "survey",
                    data: { model: popupSurvey },
                    onShow: () => {
                        popupSurvey.data = { popupDescription: desc };
                    },
                    onApply: () => {
                        // Get values from the pop-up survey using its `data` property
                        // and update the current question
                        options.question.setPropertyValue("popupDescription", popupSurvey.data["popupDescription"]);
                        return true;
                    },
                    onCancel: () => {
                        console.log("Cancel");
                    },
                    cssClass: "sv-property-editor",
                    title: "Configure Pop-Up Description for " + options.question.title
                });
            } else {
                alert(desc);
            }
        },
    }];
}

const creator = new SurveyCreator();

creator.onSurveyInstanceSetupHandlers.add((_, options) => {
    if (options.area === "designer-tab") {
        options.survey.onGetQuestionTitleActions.add((_, options) => {
            addLearnMoreButton(options, true);
        });
    }
    if (options.area === "preview-tab") {
        options.survey.onGetQuestionTitleActions.add((_, options) => {
            addLearnMoreButton(options, false);
        });
    }
});

creator.JSON = surveyJSON; // or `creator.JSON = {};` if there is no default survey JSON schema
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/customize-form-builder-ui/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/customize-form-builder-ui/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/customize-form-builder-ui/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/customize-form-builder-ui/jquery.md)