A Data Source is implemented as a context provider manifest and a React provider component. The manifest declares the extension's contract, and the component implements its state and behavior.
Follow the instructions below to:
Start with a generated Data Source so the file structure and registration are in place. For the full procedure, see Add a Data Source Extension in Studio Two.
You can find the generated files under src/extensions/site/contexts/<provider-folder>/:
<provider-folder>.extension.ts contains the context provider manifest.<provider-folder>.tsx contains the React provider component.For details about both files, see Context Provider Extension Files and Code.
Open <provider-folder>.extension.ts. The generated manifest uses extensions.contextProvider() and contains the following sections:
context.items declares each value and function that ERCs can connect to.data declares configuration inputs that a Wix user sets on the Data Source.resources points to the provider component and names its exported context hook.For example, the generated counter declares a count value, functions for changing it, and an initial count input:
Keep the generated id stable after Wix users connect elements to the Data Source. Update displayName, context.items, and data to describe your Data Source.
For every field, see About the Context Provider Manifest.
Open <provider-folder>.tsx. Implement every value and function declared in context.items, and accept each configuration input you use from data as a prop.
The generated counter holds its count in React state and provides the count and its functions through React Context:
Export the hook named by resources.contextSpecifier.hook, and export the provider component as the default export. ERCs connect to the exposed values and functions through editor binding. They don't call the hook directly.
Keep each Data Source focused on one domain or feature. Expose state values together with the functions that change them, such as a selected teammate ID and a selectTeammate function.
Attach the Data Source at the narrowest scope that needs it. A Data Source attached to a container affects only the components nested in it, while one attached to a page can affect every connected component on that page.
Separate frequently changing values from stable values when possible. Every connected ERC that receives an updated value renders again.
Derive values from other state instead of storing them separately. useMemo recalculates a derived value only when the state it depends on changes:
When a Data Source loads information based on a configuration input, accept the input as a provider prop and load the resource when that value changes. Expose loading and error state when connected ERCs need to represent those states.
Finally, check that:
context.items entry has a matching value or function in the provider.data entry and prop.resources.client.url and contextSpecifier.hook values match the provider file and export.If an ERC doesn't receive an expected value, check that the Data Source is attached above the ERC, the ERC prop is connected to the correct context item, and both manifests use compatible data types.
To check the Data Source:
data inputs, click the Manage button that names your Data Source in the floating toolbar, or the row of the connected source, and set them. Each input appears with its displayName. For example, initialCount appears as Initial Count.context.items under Field. Field lists only the items whose data type matches the property, and selects the item automatically when only one matches.The connected element shows the value from your Data Source. To find the page, container, or section in the Layers panel, see Studio Two Editor: Working with Layers. For the Connect Source panel, see Connect to Source.
When the Data Source behaves as expected, click Publish to ship it with the site.
context section of a context provider manifestLast updated: 2 November 2026