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. This example demonstrates how to enable the UI Preset Editor, register predefined presets, and create, apply, save, and load custom presets.
Enable the UI Preset Editor
To enable the UI Preset Editor, import its module or reference its script:
// Modular applications
import { UIPresetEditor } from "survey-creator-core/ui-preset-editor";
<!-- Classic script applications -->
<head>
<script src="https://unpkg.com/survey-creator-core/ui-preset-editor.min.js"></script>
</head>
To attach the editor to Survey Creator, instantiate UIPresetEditor and pass a SurveyCreatorModel to its constructor:
// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
new UIPresetEditor(creator);
Register Predefined Presets
SurveyJS includes three predefined UI presets:
Basic
A streamlined preset for simple surveys and forms. Includes only the most commonly used question types and a simplified Property Grid. Perfect if you want a clean, easy-to-use interface with minimal configuration.Advanced
A balanced preset for most use cases. Includes additional question types and features, along with a moderately detailed Property Grid. Suitable if you need flexibility without overwhelming complexity.Expert
A full-featured preset with access to all available question types, settings, and Property Grid options. It provides maximum control at the cost of a more complex UI.
Register these presets to use them as a starting point for customization:
// 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/ui-presets/index.min.js"></script>
<script>
SurveyCreatorCore.registerUIPreset(SurveyCreatorUIPreset);
</script>
Once the predefined presets are registered, you are set to create your custom presets based on them.
Create a Custom Preset
A UI preset consists of configuration across five categories:
Languages
Define the Survey Creator UI language and supported survey languages.Tabs
Control which tabs are visible (Designer, Preview, Logic, Themes, Translations, JSON Editor) as well as their order, titles, icons, and the default active tab.Toolbox
Show, hide, rename, reorder, and group toolbox items.Property Grid
Customize property visibility, order, grouping, and display names.Options
Adjust additional settings that affect overall behavior and appearance.
Configure settings in these categories and save them as a preset. You can export a preset as JSON and include it in your application or allow end users to create and manage presets dynamically.
Apply a Custom Preset
To apply a preset, 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.
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. PasssaveNoas the first argument. Passtrueas the second argument if the operation succeeds; otherwise, passfalse.
Example: Save to localStorage
import { UIPresetEditor } from "survey-creator-core/ui-preset-editor";
// ...
// Omitted: `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: `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
);
};
In this demo, presets are stored in localStorage, but the same approach applies to any backend.