---
title: Customize Form Appearance
product: Survey Creator
description: Effortlessly customize the appearance of your forms with our no-code Theme Editor. Select from a gallery of multiple templates and add even more visuals: a background image, fonts, accent colors, and more. The editor automatically generates all CSS variables to reduce the need for manual coding. View this free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/survey-creator/examples/change-form-theme/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Customize Form Appearance (React)
Survey Creator by SurveyJS features an integrated Theme Editor—a powerful form styling tool that automatically generates a form UI theme definition in JSON format. Theme Editor provides a smart, user-friendly interface that enables you to add a background image to your form, customize fonts, change accent colors, and more. This demo introduces basic Theme Editor functionalities. Open the Property Grid and select a predefined theme to quickly change the form appearance. Customize your theme further using editors in the Property Grid. Finally, export the theme as a JSON object and apply it to a standalone SurveyJS form in your application.
## Enable Theme Editor
Theme Editor is integrated into Survey Creator as a separate Themes tab, which is hidden by default. To display the tab, enable the [`showThemeTab`](/survey-creator/documentation/api-reference/survey-creator#showThemeTab) property. If you want to switch to the Themes tab programmatically, assign `"theme"` to the [`activeTab`](/survey-creator/documentation/api-reference/survey-creator#activeTab) property (see the component code listing).
## Add Predefined UI Themes
SurveyJS is shipped with a number of [predefined UI themes for surveys](/documentation/themes-and-custom-styles#predefined-themes). By default, users can customize only the Default Light theme. To add other themes to Theme Editor, use the following code:
```js
// In modular applications
import SurveyTheme from "survey-core/themes"; // An object that contains all theme configurations
import { registerSurveyTheme } from "survey-creator-core";
registerSurveyTheme(SurveyTheme);
```
```html
```
## Create a Custom Theme
SurveyJS themes use CSS variables to specify colors, fonts, sizes, and other survey appearance settings. These variables are bound to editors that you can find in Theme Editor's Property Grid. To create a custom theme, change values in these editors.
Once you finish customization, click the Export button to download a JSON object with CSS variables and other theme settings:
## Apply a Custom Theme
To apply your custom theme to a standalone survey, pass the theme JSON object to `SurveyModel`'s [`applyTheme(theme)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#applyTheme) method:
```js
import { Model } from "survey-core";
const surveyJson = { ... };
const survey = new Model(surveyJson);
survey.applyTheme({
"cssVariables": {
// ...
},
"themeName": "doubleborder",
"colorPalette": "dark",
"isPanelless": true
});
```
If you want to apply a custom theme to a survey being configured in Survey Creator, assign the theme JSON object to `SurveyCreatorModel`'s [`theme`](/survey-creator/documentation/api-reference/survey-creator#theme) property:
```js
import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = {
showThemeTab: true
};
const creator = new SurveyCreatorModel(creatorOptions);
const themeJson = { ... };
creator.theme = themeJson;
```
## Save and Load Custom Themes
Theme JSON objects can be stored on your server to let users save, share, and restore custom themes or switch between them. Refer to the following help topic for information on how to save theme JSON objects to a remote storage:
[Save and Load Custom Themes](/survey-creator/documentation/theme-editor#save-and-load-custom-themes (linkStyle))
For demonstration purposes, this example saves theme JSON objects to the browser's `localStorage`. You can change theme settings and reload or leave this page—your changes will be restored on your next visit.
## Files
### `public/index.html`
```html
```
### `src/survey_json.js`
```js
export const surveyJson = {
"title": "NPS Survey",
"description": "NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities.",
"logo": "data:image/png;base64,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",
"logoWidth": "156px",
"logoHeight": "64px",
"completedHtml": "Thank you for your feedback
",
"completedHtmlOnCondition": [
{
"expression": "{nps_score} >= 9",
"html": "Thank you for your feedback
We are glad that you love our product. Your ideas and suggestions will help us make it even better.
"
},
{
"expression": "{nps_score} >= 6 and {nps_score} <= 8",
"html": "Thank you for your feedback
We are glad that you shared your ideas with us. They will help us make our product better.
"
}
],
"pages": [
{
"name": "page1",
"elements": [
{
"type": "rating",
"name": "nps_score",
"title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
"defaultValue": 9,
"rateCount": 11,
"rateMin": 0,
"rateMax": 10
},
{
"type": "checkbox",
"name": "promoter_features",
"visibleIf": "{nps_score} >= 9",
"title": "Which of the following features do you value the most?",
"description": "Please select no more than three features.",
"defaultValue": [
"Stability",
"Learning materials (documentation, demos, code examples)",
"User interface"
],
"isRequired": true,
"validators": [
{
"type": "answercount",
"text": "Please select no more than three features.",
"maxCount": 3
}
],
"choices": [
"Performance",
"Stability",
"User interface",
"Complete functionality",
{
"value": "Learning materials (documentation, demos, code examples)",
"text": "Learning materials"
},
"Quality support"
],
"otherText": "Other features:",
"colCount": 2
}
]
}
],
"widthMode": "static",
"width": "904"
};
```
### `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 { surveyJson } from "./survey_json";
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, registerSurveyTheme } from "survey-creator-core";
registerSurveyTheme(SurveyTheme); // Add predefined Form Library UI themes
registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes
function SurveyCreatorRenderComponent() {
const creator = new SurveyCreator({ showThemeTab: true, autoSaveEnabled: true });
creator.JSON = surveyJson;
const localStorageKey = "survey-theme-json";
creator.saveThemeFunc = (saveNo, callback) => {
// Save a custom theme to the localStorage
window.localStorage.setItem(localStorageKey, JSON.stringify(creator.theme));
callback(saveNo, true);
};
const savedTheme = window.localStorage.getItem(localStorageKey);
if (savedTheme) {
creator.theme = JSON.parse(savedTheme);
}
// Activate the Themes tab
creator.activeTab = "theme";
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/change-form-theme/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/change-form-theme/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/change-form-theme/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/change-form-theme/vanillajs.md)