> 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: About Editor React Components

## Article: About Editor React Components

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md

## Article Content:

# About Editor React Components

An [Editor React Component (ERC)](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components.md) is a visual component in Studio Two's [component model](https://dev.wix.com/docs/studio-two/code-your-site/code-model/about-the-component-model.md). 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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md).

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](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md).

For the specific files you get and what each one is for, see [Editor React Component Extension Files and Code](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-component-extension-files-and-code.md).

## 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](https://dev.wix.com/docs/site-extensions/editor-react-components/about-auto-panels-for-editor-react-components.md).

- 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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference.md).
  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](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources.md) exposes, or to a function from a [function library](https://dev.wix.com/docs/studio-two/code-your-site/code-model/function-libraries/about-function-libraries.md). 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](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/use-a-wix-context-in-an-editor-react-component-in-studio-two.md). For every context Wix provides, see [Wix Business Solution Contexts](https://dev.wix.com/docs/contexts.md).

For the full set of patterns, including containers and composition from ref elements, see [Component Integration Patterns](https://dev.wix.com/docs/studio-two/code-your-site/code-model/component-integration-patterns.md).

## See also

- [Add an Editor React Component Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/add-an-editor-react-component-extension-in-studio-two.md)
- [Build an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md)
- [Use a Wix Context in an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/use-a-wix-context-in-an-editor-react-component-in-studio-two.md)
- [Editor React Components](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components.md)
- [Editor React Component Extension Files and Code](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-component-extension-files-and-code.md)
- [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)