Advanced Preset for Survey Creator UI

This demo showcases the Advanced UI preset. It offers a balanced configuration suitable for most use cases without introducing unnecessary complexity. Compared to the Basic preset, it includes additional question types and features, a moderately detailed Property Grid, and three extra tabs: Logic, Themes, and Translations.

To apply the Advanced preset, use the following code:

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

// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
const advancedPreset = new UIPreset(Advanced);
advancedPreset.applyTo(creator);

<!-- Classic script applications -->
<head>
  <!-- ... -->
  <script src="https://unpkg.com/survey-creator-core/ui-presets/index.min.js"></script>
  <!-- ... -->
</head>
<body>
  <script>
    // ...
    // Omitted: `SurveyCreatorModel` initialization
    // ...
    const advancedPreset = new SurveyCreatorCore.UIPreset(SurveyCreatorUIPreset.Advanced);
    advancedPreset.applyTo(creator);
  </script>
</body>

The Advanced UI preset enables the Themes and Translations tabs. These tabs require additional configuration for full functionality.

SurveyJS includes a set of predefined UI themes. By default, users can customize only the Default Light theme. To make additional themes available in the Themes tab, use the following code:

View Code

// Modular applications
import SurveyTheme from "survey-core/themes"; // An object that contains all theme configurations
import { registerSurveyTheme } from "survey-creator-core";

registerSurveyTheme(SurveyTheme);

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

This configuration allows survey authors to create custom themes based on predefined ones and export or import them as JSON objects. To enable saving custom themes to a database or another storage, refer to the following topic:

Save and Load Custom Themes

The Translations tab allows users to localize surveys. For full functionality, you need to load the required localization dictionaries. You can include all languages or only selected ones.

View Code

// 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 -->
<head>
  <!-- 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>
  <!-- ... -->
</head>

Basic UI Preset Demo

Expert UI Preset Demo

UI Preset Editor Demo

UI Preset Editor Documentation