Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

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

# Wix

Props the editor passes to your Editor React Component (ERC) as a `wix` prop, so the component can
work with editor features such as presets and element removal. You never declare `Wix` in a
manifest, and it is not a `dataType`. Only a rendered ERC receives it, not
a context provider or a function library.

## Component

In your component code, import the `Wix` type from `@wix/editor-react-types`:

```ts
import type { Wix } from '@wix/editor-react-types';
```

A `Wix` object has the following properties:

<PropertyList bordered>
  <Property
    name="elementsRemovalState"
    type="Record<string, 'REMOVED'>"
    required
    description="Which removable elements the Wix user has removed. Keys are element keys from the manifest, values are 'REMOVED'."
  />
  <Property
    name="presetsWrapperProps"
    type="{ className: string }"
    description="Props to spread on the outermost wrapper element when using presets. Required for the preset picker to work."
  />
</PropertyList>

> **An element appears in `elementsRemovalState` only when its manifest marks it removable.**
> When the Wix user removes such an element, its key is set to `'REMOVED'`, so check this
> before rendering that element.

### Usage

The editor injects the `wix` prop, and your component reads from it. For how it passes this
and every other prop to your component, see the [Editor React Component runtime props
reference](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference#wix-integration-props).

::::tabs
:::Consumers
Spread `presetsWrapperProps` on your outer wrapper, and read `elementsRemovalState` to
skip elements the Wix user removed:

```tsx
import type { Wix } from '@wix/editor-react-types';

function Section({ className, wix }: { className: string; wix?: Wix }) {
  return (
    <div {...wix?.presetsWrapperProps}>
      <div className={className}>...</div>
    </div>
  );
}
```
:::
::::