---
title: Add Custom Properties to the Property Grid
product: Survey Creator
description: Increase functional capabilities of your survey forms by adding custom properties to the property grid of a survey builder. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Add Custom Properties to the Property Grid (React)

Survey elements include a number of built-in properties that cover most use cases. However, you can add custom properties to the survey elements if you want to extend their functionality. Custom properties can be serialized and included in the survey JSON schema. Both built-in and custom properties are set in the Property Grid of Survey Creator. 

To add a custom property, call the `addProperty(questionType, propertySettings)` method on the `Survey.Serializer` object. This method accepts the following arguments:

- `questionType`        
A string value that specifies the question type to which the property should be added. You can use a specific type (see the [getType](https://surveyjs.io/Documentation/Library?id=Question#getType) description) or one of the base types. In the latter case, the new property is added to all question types derived from the base type. Refer to the API of a specific question type for information on its inheritance chain.

- `propertySettings`      
Settings that configure the property's appearance and behavior. For information about these settings, refer to the following help section: [Survey Element Property Settings](https://surveyjs.io/survey-creator/documentation/property-grid#survey-element-property-settings).

This demo shows how to add custom properties to the survey, page, and all questions.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `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 { Serializer, SvgRegistry } from "survey-core";
import { getLocaleStrings } from "survey-creator-core";
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

// Add a property to the Survey class
Serializer.addProperty("survey", {
    name: "customSurveyProperty",
    category: "customCategory",
    visibleIndex: 0
});
// Add a property to the Page class
Serializer.addProperty("page", {
    name: "customPageProperty",
    category: "customCategory",
    visibleIndex: 0
});
// Add a property to the base Question class and to all questions as a result
Serializer.addProperty("question", {
    name: "customNumericProperty",
    type: "number",
    category: "customCategory",
    default: 1,
    visibleIndex: 0,
    onSetValue: (survey, value) => {
        // ...
        // You can perform required checks here
        // ...
        // Set the `value`
        survey.setPropertyValue("customNumericProperty", value);
        // You can perform required actions after the `value` is set
        // ...
    }
});

// Specify a title for the custom category in the Property Grid
const translations = getLocaleStrings("en");
translations.pe.tabs.customCategory = "Custom Settings";

// Register an icon for the custom category in the Property Grid
const customIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5275 7.5275L9.5275 17.5275C9.3775 17.6775 9.1875 17.7475 8.9975 17.7475C8.8075 17.7475 8.6175 17.6775 8.4675 17.5275L4.4675 13.5275C4.1775 13.2375 4.1775 12.7575 4.4675 12.4675C4.7575 12.1775 5.2375 12.1775 5.5275 12.4675L8.9975 15.9375L18.4675 6.4675C18.7575 6.1775 19.2375 6.1775 19.5275 6.4675C19.8175 6.7575 19.8175 7.2375 19.5275 7.5275Z" />
</svg>`;
SvgRegistry.registerIcon("icon-custom", customIcon);

function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    creator.onSurveyInstanceCreated.add((_, options) => {
        // Assign the icon to the custom category 
        if (options.area === "property-grid") {
            const choicesCategory = options.survey.getPageByName("customCategory");
            if (choicesCategory) {
                choicesCategory.iconName = "icon-custom";
            }
        }
    });
    creator.JSON = {
      "pages": [{
        "name": "page1",
        "elements": [{
          "type": "text",
          "name": "question1"
        }]
      }]
    };
    creator.showSidebar = true;
    creator.activatePropertyGridCategory("customCategory");
    return (<SurveyCreatorComponent creator={creator} />);
}

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(<SurveyCreatorRenderComponent />);
```

### `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/add-properties-to-property-grid/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/vanillajs.md)