About Data Sources

A context provider is a logical component that shares state and behavior with Editor React Components in Studio Two. The Studio Two editor and the Wix Extension Builder call this extension a Data Source. Its generated code uses context provider APIs and React Context, documented in About Context Provider Extensions.

How Data Sources work in Studio Two

A Data Source connects several ERCs to the same state and functions through editor binding:

1. You add the Data Source extension from the Code tab through the Wix Extension Builder.
2. The generated context provider manifest declares the values and functions it exposes.
3. The generated React provider component implements those values and functions.
4. A Wix user attaches the Data Source to a page, container, or section. For how to attach it, see Connect to Source. To add the section first, see Studio Two Editor: Adding and Managing Sections.
5. The Wix user connects nested ERC props to compatible exposed items.
6. When the shared state changes at runtime, the connected ERCs receive updated prop values.

Wix and custom Data Sources

Wix business solutions provide Data Sources for coordinated site experiences. For example, the Wix Stores Product Data Source provides the Product Context, which holds a product's details, the selected options, pricing, and stock, along with functions such as adding the selection to the cart. An ERC can connect to it through editor binding, or read it directly by calling the context's hook. For every context Wix provides, see Wix Business Solution Contexts. Wix also creates Data Sources for each CMS collection, so you can connect elements to collection data. Learn more about CMS Data Sources.

You can add a custom Data Source when several components need site-specific state. For example, a team page can share the selected department, a filtered teammate list, and a function for changing the filter.

Data Source files

A custom Data Source has 2 files:

• A context provider manifest that declares configuration inputs and exposed items.
• A React provider component that implements the state and behavior.

For the files and manifest fields, see About Context Provider Extensions in Extension References.

See also

• Add a Data Source Extension in Studio Two
• Build a Data Source in Studio Two
• Context Providers
• Context Provider Extension Files and Code
• Component Integration Patterns