--- title: UI Preset Editor product: Survey Creator description: The UI Preset Editor for Survey Creator lets you customize the UI and functionality of the form builder through a no-code interface. Enable it to use predefined presets or create your own. framework: React source: https://surveyjs.io/survey-creator/examples/ui-preset-editor/reactjs index: https://surveyjs.io/survey-creator/examples/overview.md --- # UI Preset Editor (React) 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: ```js // Modular applications import { UIPresetEditor } from "survey-creator-core/ui-preset-editor"; ``` ```html ``` To attach the editor to Survey Creator, instantiate [`UIPresetEditor`](/survey-creator/documentation/api-reference/uipreseteditor) and pass a [`SurveyCreatorModel`](/survey-creator/documentation/api-reference/survey-creator) to its constructor: ```js // ... // Omitted: `SurveyCreatorModel` initialization // ... new UIPresetEditor(creator); ``` ## Register Predefined Presets SurveyJS includes three predefined UI presets: - [Basic](/survey-creator/examples/basic-ui-preset/) 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](/survey-creator/examples/advanced-ui-preset/) 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](/survey-creator/examples/expert-ui-preset/) 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: ```js // Modular applications import SurveyCreatorUIPreset from "survey-creator-core/ui-presets"; import { registerUIPreset } from "survey-creator-core"; registerUIPreset(SurveyCreatorUIPreset); ``` ```html ``` 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](#save-and-load-custom-presets). ## Apply a Custom Preset To apply a preset, create a [`UIPreset`](/survey-creator/documentation/api-reference/uipreset) instance with a JSON configuration and call [`applyTo()`](/survey-creator/documentation/api-reference/uipreset#applyTo): ```js // Modular applications import { UIPreset } from "survey-creator-core"; // ... // Omitted: `SurveyCreatorModel` initialization // ... const presetJson = { /* Preset configuration */}; const preset = new UIPreset(presetJson); preset.applyTo(creator); ``` ```html ``` > 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`](/survey-creator/documentation/api-reference/uipreseteditor#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` ```js 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 ```js 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. ## See Also [UI Preset Editor Documentation](/survey-creator/documentation/ui-preset-editor (linkStyle)) ## Files ### `public/index.html` ```html

``` ### `src/SurveyCreatorComponent.jsx` ```js import React from "react"; import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react"; import "survey-core/survey.i18n"; import "survey-creator-core/survey-creator-core.i18n"; import SurveyCreatorUIPreset from "survey-creator-core/ui-presets"; import { registerUIPreset } from "survey-creator-core"; import { UIPresetEditor } from "survey-creator-core/ui-preset-editor"; 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 registerUIPreset(SurveyCreatorUIPreset); // Add predefined Survey Creator UI presets const localStorageKey = "survey-creator-presets"; function SurveyCreatorRenderComponent() { const creator = new SurveyCreator(); const presetEditor = new UIPresetEditor(creator); // Load existing presets const savedPresets = JSON.parse(localStorage.getItem(localStorageKey)) || []; savedPresets.forEach(p => presetEditor.addPreset(p)); // Save preset to the `localStorage` 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); }; creator.showSidebar = false; setTimeout(() => { creator.openCreatorThemeSettings(); }, 400); return (); } export default SurveyCreatorRenderComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyCreatorRenderComponent from "./SurveyCreatorComponent"; const root = createRoot(document.getElementById("surveyCreatorContainer")); root.render(); ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest", "survey-creator-core": "latest", "survey-creator-react": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/survey-creator/examples/ui-preset-editor/angular.md) - [Vue 3](https://surveyjs.io/survey-creator/examples/ui-preset-editor/vue3js.md) - [jQuery](https://surveyjs.io/survey-creator/examples/ui-preset-editor/jquery.md) - [Vanilla JS](https://surveyjs.io/survey-creator/examples/ui-preset-editor/vanillajs.md)