> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Display Filters

## Article: Display Filters

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Display Filters
The `displayFilters` property controls which properties appear in the editor panels when Wix users select your component. Use it to hide properties that your component uses internally but that Wix users shouldn't edit, or to show only relevant properties for a specific preset or state.

## Where to define

You can define `displayFilters` in:
- [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md)
- [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) of type `inlineElement`
- [Preset](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets.md) items (inside `presetDefaults`)
- [State](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/states.md) items

If multiple levels define filters, the editor applies them in the following order:

1. Element filters
2. Preset filters
3. State filters

Only items that pass every applicable filter appear in the editor.

## Display filter keys

Each key corresponds to a section in your manifest. Use `hide` or `show` (not both) to control which items from that section appear in the editor. If you don't define a display filter for a category, no filter is applied.

- `hide`: The editor shows all items except those in the list.
- `show`: The editor shows only the items in the list, everything else is hidden.

<br />

<PropertyList bordered>
  <Property
    name="data"
    type="DisplayFilter"
    description="Filter keys from your data map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="Data item keys to hide. All other data items remain visible." />
        <Property name="show" type="string[]" description="Only these data item keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="cssProperties"
    type="DisplayFilter"
    description="Filter keys from your cssProperties map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="CSS property keys to hide. All other CSS properties remain visible." />
        <Property name="show" type="string[]" description="Only these CSS property keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="cssCustomProperties"
    type="DisplayFilter"
    description="Filter keys from your cssCustomProperties map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="CSS custom property keys to hide. All other custom properties remain visible." />
        <Property name="show" type="string[]" description="Only these CSS custom property keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="elements"
    type="DisplayFilter"
    description="Filter keys from your elements map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="Element keys to hide. All other elements remain visible." />
        <Property name="show" type="string[]" description="Only these element keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="customActions"
    type="DisplayFilter"
    description="Filter keys from your customActions map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="Custom action keys to hide. All other custom actions remain visible." />
        <Property name="show" type="string[]" description="Only these custom action keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="actions"
    type="DisplayFilter"
    description="Filter built-in editor actions. Use the predefined action names listed below."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="Action names to hide. All other actions remain visible. Use names from the action names list." />
        <Property name="show" type="string[]" description="Only these action names are shown. All others are hidden. Use names from the action names list." />
      </PropertyList>
    </ExpandableSection>
    <ExpandableSection name="Action names">
      <PropertyList>
        <Property name="settings" description="Settings panel button." />
        <Property name="design" description="Design panel button." />
        <Property name="media" description="Media picker button." />
        <Property name="manageItems" description="Item manager (for lists)." />
        <Property name="manageMenu" description="Menu manager." />
        <Property name="container" description="Container editing mode." />
        <Property name="dashboard" description="Dashboard features." />
        <Property name="custom" description="All your custom actions." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="states"
    type="DisplayFilter"
    description="Filter keys from your states map."
  >
    <ExpandableSection name="DisplayFilter properties">
      <PropertyList>
        <Property name="hide" type="string[]" description="State keys to hide. All other states remain visible." />
        <Property name="show" type="string[]" description="Only these state keys are shown. All others are hidden." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

## Relationship with display groups

[Display groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md) and display filters operate independently. Display filters remove properties before the editor panel receives them. Display groups organize whatever properties remain.

## Examples

### Element and preset filters

The following uses both `hide` and `show` across levels. At the component level, the component hides the data property `internalId`. The `'compact'` preset then uses `show` to restrict the visible data properties to just `title` and `icon`. When you select that preset, only those two appear in the editor; the editor hides `subtitle` and any other data properties.

```typescript
editorElement: {
  displayFilters: {
    data: { hide: ['internalId'] },
  },
  presets: {
    compact: {
      displayName: 'Compact',
      presetDefaults: {
        displayFilters: {
          data: { show: ['title', 'icon'] },
        },
      },
    },
  },
}
```

### All supported filter keys

The following shows `displayFilters` with all supported keys configured.

```typescript
editorElement: {
  displayFilters: {
    elements: {
      hide: ['advancedIcon', 'debugPanel'],
    },
    cssProperties: {
      show: ['backgroundColor', 'color', 'fontSize', 'padding', 'margin'],
    },
    cssCustomProperties: {
      show: ['borderRadius', 'shadowDepth'],
    },
    data: {
      hide: ['internalConfig', 'debugMode', 'advancedSettings'],
    },
    customActions: {
      show: ['editContent', 'duplicateElement', 'resetStyles'],
    },
    actions: {
      hide: ['dashboard', 'manageItems'],
    },
    states: {
      hide: ['open', 'loading'],
    },
  },
}
```

## See also

- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)