---
title: Basic Preset for Survey Creator UI
product: Survey Creator
description: This demo shows the Basic preset for Survey Creator UI configuration designed for simple surveys and forms. It offers a streamlined interface, limited question types, and a simplified settings panel.
framework: React
source: https://surveyjs.io/survey-creator/examples/basic-ui-preset/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Basic Preset for Survey Creator UI (React)
UI presets allow you to configure the Survey Creator UI and functionality, save these settings as a JSON object, and reuse them when embedding Survey Creator into your application. SurveyJS includes three predefined presets tailored to different experience levels: Basic, Advanced, and Expert. This demo showcases the **Basic** UI preset designed for simple surveys and forms. It includes only the most commonly used question types and simplifies the Property Grid to reduce complexity.
## Apply the Basic UI Preset
To apply the Basic preset, use the following code:
```js
// Modular applications
import { UIPreset } from "survey-creator-core";
import { Basic } from "survey-creator-core/ui-presets";
// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
const basicPreset = new UIPreset(Basic);
basicPreset.applyTo(creator);
```
```html
```
## See Also
[Advanced UI Preset Demo](/survey-creator/examples/advanced-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 { UIPreset } from "survey-creator-core";
import { Basic } 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
function SurveyCreatorRenderComponent() {
const creator = new SurveyCreator();
// Apply the Basic UI preset
const basicPreset = new UIPreset(Basic);
basicPreset.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/basic-ui-preset/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/basic-ui-preset/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/basic-ui-preset/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/basic-ui-preset/vanillajs.md)