---
title: Advanced Preset for Survey Creator UI
product: Survey Creator
description: This demo shows the Advanced preset for Survey Creator UI configuration. It offers a well-balanced setup with most question types, a moderately detailed settings panel, and additional tabs such as Logic, Themes, and Translations.
framework: React
source: https://surveyjs.io/survey-creator/examples/advanced-ui-preset/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Advanced Preset for Survey Creator UI (React)
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](/survey-creator/examples/basic-ui-preset/) preset, it includes additional question types and features, a moderately detailed Property Grid, and three extra tabs: Logic, Themes, and Translations.
## Apply the Advanced UI Preset
To apply the Advanced preset, use the following code:
```js
// 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);
```
```html
```
## Configure the Themes and Translations Tabs
The Advanced UI 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))
[Expert UI Preset Demo](/survey-creator/examples/expert-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 { Advanced } 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 Advanced UI preset
const advancedPreset = new UIPreset(Advanced);
advancedPreset.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/advanced-ui-preset/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/advanced-ui-preset/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/advanced-ui-preset/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/advanced-ui-preset/vanillajs.md)