---
title: Expert Preset for Survey Creator UI
product: Survey Creator
description: This demo shows the Expert preset for Survey Creator UI configuration. It provides access to all features, including the JSON Editor and a settings panel with all available properties for maximum control.
framework: React
source: https://surveyjs.io/survey-creator/examples/expert-ui-preset/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Expert Preset for Survey Creator UI (React)
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.
## Apply the Expert UI Preset
To apply the Expert preset, use the following code:
```js
// 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);
```
```html
```
## Configure the Themes and Translations Tabs
As with the [Advanced UI preset](/survey-creator/examples/advanced-ui-preset/), the Expert preset enables the Themes and Translations tabs. These tabs require additional configuration for full functionality.
### Themes Tab
SurveyJS includes a set of [predefined UI themes](/documentation/themes-and-custom-styles#predefined-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
```js
// Modular applications
import SurveyTheme from "survey-core/themes"; // An object that contains all theme configurations
import { registerSurveyTheme } from "survey-creator-core";
registerSurveyTheme(SurveyTheme);
```
```html
```
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](/survey-creator/documentation/theme-editor#save-and-load-custom-themes (linkStyle))
### Translations Tab
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
```js
// 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";
```
```html
```
## See Also
[Basic UI Preset Demo](/survey-creator/examples/basic-ui-preset/ (linkStyle))
[Advanced UI Preset Demo](/survey-creator/examples/advanced-ui-preset/ (linkStyle))
[UI Preset Editor Demo](/survey-creator/examples/ui-preset-editor/ (linkStyle))
[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 SurveyTheme from "survey-core/themes";
import { UIPreset, registerSurveyTheme } from "survey-creator-core";
import { Expert } from "survey-creator-core/ui-presets";
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
registerSurveyTheme(SurveyTheme); // Add predefined survey themes for the Themes tab
function SurveyCreatorRenderComponent() {
const creator = new SurveyCreator();
// Apply the Expert UI preset
const expertPreset = new UIPreset(Expert);
expertPreset.applyTo(creator);
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/expert-ui-preset/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/expert-ui-preset/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/expert-ui-preset/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/expert-ui-preset/vanillajs.md)