An Editor React Component (ERC) must connect its rendered DOM to the declarations in its manifest. These requirements let the editor select, style, and configure the component.
Export a default React function component that accepts the standard id and className props. Apply both props to the component's root element.
The root element also needs a class that matches the manifest's editorElement.selector:
For details about the values the editor passes to the component, see Runtime Props Reference.
The editor uses 2 values together to locate a component instance:
selector must match a class on the root element.id prop.If either value is missing, the component can render without being selectable. The Wix user can't open its action bar or auto panels.
Manifest selectors are DOM query selectors. The editor runs them against the component's rendered output, so every selector must describe an element the component renders.
Follow these rules when writing selectors:
Match the rendered class. CSS Modules rewrite class names at build time. Add a plain string class for the manifest to target alongside the CSS Modules class and the editor-provided className:
In this example, testimonial-card reaches the DOM unchanged, so selector: '.testimonial-card' can match it.
Keep the root selector specific. Selectors must be 4 to 50 characters. Name the root class after the component, such as .testimonial-card, to avoid collisions with other components on the page.
Prefer classes. Tag and attribute selectors can match too broadly, while a class can identify the intended root or inner element directly.
Keep the component and manifest aligned. If you rename a class, update the corresponding selector in the manifest.
Add a class to each inner element that the manifest targets, and make its class match the corresponding elements selector.
Data prop names in the component must also match the keys in the manifest's data declaration.
Last updated: 2 November 2026