About Editor React Components

An Editor React Component (ERC) is a visual component in Studio Two's component model. It renders on a page, and a declarative manifest tells the editor which of its parts a Wix user can customize.

Wix provides built-in ERCs such as Button, Image, Text, and Video Player, which a Wix user places from the Add Elements panel. You can also author your own ERC in your site project when you need a component with its own design and behavior, and you want it to feel like a native element in the editor.

Anatomy of an Editor React Component

An ERC in a Studio Two project is a manifest and the React code that implements it:

• The component code is the React implementation, along with its default prop values and styles.
• The manifest declares the component's identity, its installation size, its resources, and an editorElement describing what's customizable. For the full set of fields, see About the Editor React Component Manifest.

The manifest follows from the component rather than the other way around. You build the React component first, then regenerate the editorElement portion of the manifest from your component code. You adjust the declarations rather than write them from scratch. For that workflow end to end, see Build an Editor React Component in Studio Two.

For the specific files you get and what each one is for, see Editor React Component Extension Files and Code.

How Editor React Components are used

An ERC is used at design time when the site is being built, and at runtime when the site loads.

• Design time

  1. You add the component from the Code tab through the Wix Extension Builder, which puts its files in your site project and registers it.
  2. A Wix user places the component on a page from the Design tab.
  3. The editor reads the manifest and builds the panels and controls the Wix user configures the component through. For the panels each manifest section drives, see About Auto Panels for Editor React Components.

• Runtime

  1. The site loads with the component's code.
  2. Data the Wix user set arrives on the component as React props. For the prop contract, see Runtime Props Reference.
  3. Style changes are applied as CSS to the elements matching the manifest's selectors.

Connecting an ERC to other components

An ERC doesn't have to get every value from a panel. A Wix user can connect one of its props through editor binding to a value or function that an ancestor Data Source exposes, or to a function from a function library. A Data Source is implemented as a context provider. The ERC still receives the result as an ordinary prop, so its code doesn't change based on where the value came from.

An ERC can also use a Wix business solution context, such as the Stores Product Context, by calling the context's hook in its own code. The ERC then reads the context wherever a Wix user places it inside a page, Data Source, or list item that provides it, without the Wix user connecting each prop. For the steps, see Use a Wix Context in an Editor React Component in Studio Two. For every context Wix provides, see Wix Business Solution Contexts.

For the full set of patterns, including containers and composition from ref elements, see Component Integration Patterns.

See also

• Add an Editor React Component Extension in Studio Two
• Build an Editor React Component in Studio Two
• Use a Wix Context in an Editor React Component in Studio Two
• Editor React Components
• Editor React Component Extension Files and Code
• About the Editor React Component Manifest