---
title: Remove Properties from the Property Grid
product: Survey Creator
description: You can remove or hide unwanted properties form the property grid of your self-hosted survey builder to make it suitable for specific needs of your end users. View our free demo for JavaScript to learn how to customize the functionality of the property grid in a few steps.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Remove Properties from the Property Grid (Vanilla JS)

If you want to prevent users from accessing or modifying a certain survey element's property, you can hide it from the Property Grid. Survey Creator allows you to hide either an individual property or multiple properties at once. This example demonstrates an API used to hide the [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/question#visibleIf) property for pages, panels, and questions and the [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description) and [`showTitle`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTitle) properties for the survey.

To hide a single property, access it using the `Serializer`'s `getProperty(className, propertyName)` method and set its [`visible`](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#visible) attribute to `false`. To hide multiple properties, handle the [`onPropertyShowing`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyShowing) event. Its second parameter includes the `show` Boolean property. Disable it for the properties you want to hide. Open the Code tab to view code examples.

## 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/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { Serializer } from "survey-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

// Hide a property of the base class for pages and panels
Serializer.getProperty("panelbase", "visibleIf").visible = false;

// Hide a property of the base class for questions
Serializer.getProperty("question", "visibleIf").visible = false;
const creator = new SurveyCreator();

// Hide multiple properties
const blackList = [ "description", "showTitle" ];
creator.onPropertyShowing.add((_, options) => {
    if (options.element.getType() === "survey") {
        options.show = blackList.indexOf(options.property.name) === -1;
    }
});

creator.JSON = {
  "elements": [
    {
      "type": "text",
      "name": "question1",
      "title": "Question"
    },
    {
      "type": "panel",
      "name": "panel1",
      "title": "Panel"
    }
  ]
};
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-js": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/jquery.md)