Expert Preset for Survey Creator UI

This demo showcases the Expert UI preset, which provides full access to all configuration options. With its comprehensive feature set, the interface is more complex, but offers maximum control over every aspect of the Survey Creator UI. The preset includes the JSON Editor tab for manual survey schema editing, and the Property Grid exposes the full set of properties for detailed customization.

To apply the Expert preset, use the following code:

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

// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
const expertPreset = new UIPreset(Expert);
expertPreset.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 expertPreset = new SurveyCreatorCore.UIPreset(SurveyCreatorUIPreset.Expert);
    expertPreset.applyTo(creator);
  </script>
</body>

As with the Advanced UI preset, the Expert 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

Advanced UI Preset Demo

UI Preset Editor Demo

UI Preset Editor Documentation