UI Preset Editor

The UI Preset Editor is a configuration tool that allows you to customize the Survey Creator interface and package those changes as reusable UI presets. Presets are defined as JSON objects and can be applied when embedding Survey Creator for end users.

Survey Creator - UI Preset Editor

This help topic explains how to enable the UI Preset Editor, work with predefined presets, create and apply custom presets, and persist them in storage.

Predefined UI Presets

SurveyJS provides three predefined presets—Basic, Advanced, and Expert—which you can use as-is or as a foundation for custom configurations.

Basic

A streamlined preset for simple surveys and forms. It includes only the most commonly used question types and simplifies the Property Grid to reduce complexity.

View Demo

Advanced

A balanced preset suitable for most use cases. Compared to Basic, it includes additional question types and features, a moderately detailed Property Grid, and extra tabs such as Logic, Themes, and Translations.

View Demo

Expert

A full-featured preset that exposes all available configuration options. It includes the JSON Editor tab and provides complete control over the Property Grid and Survey Creator behavior, at the cost of increased UI complexity.

View Demo

Enable the UI Preset Editor

To use the UI Preset Editor, include its core module and a framework-specific rendering module:

// Modular applications
// Core module
import "survey-creator-core/ui-preset-editor/index.css";
import { UIPresetEditor } from "survey-creator-core/ui-preset-editor";

// One rendering module
import "survey-creator-react/ui-preset-editor";
// import "survey-creator-vue/ui-preset-editor";
// import "survey-creator-angular/ui-preset-editor";

<!-- Classic script applications -->
<head>
  <!-- Core module -->
  <link href="https://unpkg.com/survey-creator-core@2.5.10/ui-preset-editor/index.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/survey-creator-core@2.5.10/ui-preset-editor/index.min.js"></script>

  <!-- Rendering module -->
  <script src="https://unpkg.com/survey-creator-js@2.5.10/ui-preset-editor/index.min.js"></script>
</head>

Attach the editor to Survey Creator by instantiating UIPresetEditor and pass a SurveyCreatorModel to its constructor:

// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
new UIPresetEditor(creator);

Once initialized, the UI Preset Editor becomes available from the Creator Settings panel.

UI Preset Editor attached to Survey Creator

Register Predefined Presets

Before using predefined presets in the editor, register them:

// Modular applications
import SurveyCreatorUIPreset from "survey-creator-core/ui-presets";
import { registerUIPreset } from "survey-creator-core";

registerUIPreset(SurveyCreatorUIPreset);

<!-- Classic script applications -->
<script src="https://unpkg.com/survey-creator-core@2.5.10/ui-presets/index.min.js"></script>
<script>
  SurveyCreatorCore.registerUIPreset(SurveyCreatorUIPreset);
</script>

Once registered, these presets can serve as a starting point for customization.

Create a Custom Preset

A UI preset is composed of configuration across the following categories:

  • Languages
    Define the Survey Creator UI language and supported survey languages.

  • Tabs
    Control visible tabs (Designer, Preview, Logic, Themes, Translations, JSON Editor), their order, titles, icons, and default active tab.

  • Toolbox
    Show, hide, rename, reorder, and group toolbox items.

  • Property Grid
    Configure property visibility, grouping, order, and display names.

  • Options
    Adjust miscellaneous settings that affect overall behavior and appearance.

UI Preset Editor - Setting Categories

You can modify these settings visually in the editor and export the resulting configuration as a JSON object.

Apply a UI Preset

To apply a preset (predefined or custom), create a UIPreset instance with a JSON configuration and call applyTo():

// Modular applications
import { UIPreset } from "survey-creator-core";

// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
const presetJson = { /* Preset configuration */ };

const preset = new UIPreset(presetJson);
preset.applyTo(creator);

<!-- Classic script applications -->
<script>
  // ...
  // Omitted: `SurveyCreatorModel` initialization
  // ...
  const presetJson = { /* Preset configuration */ };

  const preset = new SurveyCreatorCore.UIPreset(presetJson);
  preset.applyTo(creator);
</script>

The UI Preset Editor is not required to apply presets. It is only needed if you want to create or edit them visually.

Configure Themes and Translations

The Advanced and Expert presets enable the Themes and Translations tabs. These features require additional setup.

Themes Tab

To make predefined themes available for customization, register them:

// Modular applications
import SurveyTheme from "survey-core/themes";
import { registerSurveyTheme } from "survey-creator-core";

registerSurveyTheme(SurveyTheme);

<!-- Classic script applications -->
<script src="https://unpkg.com/survey-core/themes/index.min.js"></script>
<script>
  SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
</script>

This allows users to create, import, and export custom themes as JSON. To enable saving custom themes to a database or another storage, refer to the following topic:

Save and Load Custom Themes

Translations Tab

To enable localization, load localization dictionaries:

// Modular applications
// Option 1: All languages
import "survey-core/survey.i18n";

// Option 2: Individual languages
import "survey-core/i18n/french";
import "survey-core/i18n/german";
import "survey-core/i18n/italian";

<!-- Classic script applications -->
<!-- Option 1: All languages -->
<script src="https://unpkg.com/survey-core/survey.i18n.min.js"></script>

<!-- Option 2: Individual languages -->
<script src="https://unpkg.com/survey-core/i18n/french.min.js"></script>
<script src="https://unpkg.com/survey-core/i18n/german.min.js"></script>
<script src="https://unpkg.com/survey-core/i18n/italian.min.js"></script>

Localization and Globalization

Save and Load Custom Presets

Preset configurations are plain JSON objects and can be persisted in storage (for example, a database or browser storage).

To enable saving, implement the savePresetFunc function, which accepts two arguments:

  • saveNo
    An incremental change identifier. Use it to prevent out-of-order updates in asynchronous environments.

  • callback
    Invoke this function after saving. Pass saveNo as the first argument. Pass true as the second argument if the operation succeeds; otherwise, pass false.

Example: Save to localStorage

import { UIPresetEditor } from "survey-creator-core/ui-preset-editor";
// ...
// Omitted: stylesheet imports, rendering module setup, and SurveyCreatorModel initialization
// ...

const presetEditor = new UIPresetEditor(creator);
const localStorageKey = "survey-creator-presets";

// Load existing presets
const savedPresets = JSON.parse(localStorage.getItem(localStorageKey)) || [];
savedPresets.forEach(p => presetEditor.addPreset(p));

// Save handler
presetEditor.savePresetFunc = (saveNo, callback) => {
  const newPreset = presetEditor.preset;
  const presets = JSON.parse(localStorage.getItem(localStorageKey)) || [];

  const index = presets.findIndex(p => p.name === newPreset.name);
  if (index > -1) {
    presets[index] = newPreset;
  } else {
    presets.push(newPreset);
  }
  localStorage.setItem(localStorageKey, JSON.stringify(presets));
  callback(saveNo, true);
};

Example: Save to a Web Service

import { UIPresetEditor } from "survey-creator-core/ui-preset-editor";
// ...
// Omitted: stylesheet imports, rendering module setup, and SurveyCreatorModel initialization
// ...

const presetEditor = new UIPresetEditor(creator);

// Load existing presets
async function loadPresets(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch {
    console.log("Could not load presets");
    return [];
  }
}

loadPresets("https://your-web-service.com/")
  .then(presets => {
    presets.forEach(p => presetEditor.addPreset(p));
  });

// Save handler
function savePresetJson(url, json, saveNo, callback) {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json;charset=UTF-8"
    },
    body: JSON.stringify(json)
  })
    .then(response => callback(saveNo, response.ok))
    .catch(() => callback(saveNo, false));
}

presetEditor.savePresetFunc = (saveNo, callback) => {
  savePresetJson(
    "https://your-web-service.com/",
    presetEditor.preset,
    saveNo,
    callback
  );
};

View Demo

Send feedback to the SurveyJS team

Need help? Visit our support page

Submit
Submit Submit
OK OK

Your cookie settings

We use cookies to make your browsing experience more convenient and personal. Some cookies are essential, while others help us analyse traffic. Your personal data and cookies may be used for ad personalization. By clicking “Accept All”, you consent to the use of all cookies as described in our Terms of Use and Privacy Statement. You can manage your preferences in “Cookie settings.”

Accept All
Cookie Settings

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later