> 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: Add a Data Source Extension in Studio Two

## Article: Add a Data Source Extension in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/add-a-data-source-extension-in-studio-two.md

## Article Content:

# Add a Data Source Extension in Studio Two

A [Data Source](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources.md) shares state and behavior with Editor React Components (ERCs) through editor binding. The Studio Two editor and the Wix Extension Builder call this extension a Data Source, and its generated code uses context provider APIs and React Context.

Follow the instructions below to:

1. Add a Data Source extension to a site project.
2. Customize the generated context provider.
3. Check the Data Source.
4. Publish the site with the Data Source.

## Step 1 | Add a Data Source extension

To add a Data Source extension:

1. In the Studio Two editor, open the **Code** tab.
2. In the VS Code sidebar, open the **Wix Extension Builder**.

   ![the Wix Extension Builder in the VS Code activity bar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bff2816a5bfe47ed855a1859cd89d5a.png)

3. Under **Create an Extension**, select **Site > Data Source**.
4. In **Name**, enter a name for the Data Source. The Wix Extension Builder derives the folder name and the manifest `type` from it. For example, `Team Filter` becomes the folder `team-filter` and the type `companionApp.teamFilter`.
5. Click **Generate**.

You can find the new files under `src/extensions/site/contexts/<provider-folder>/`. The Data Source is registered in the project's `extensions.ts` and listed under **My Extensions**. For what each file is for, see [Context Provider Extension Files and Code](https://dev.wix.com/docs/site-extensions/context-providers/context-provider-extension-files-and-code.md).

## Step 2 | Customize the Data Source

You can edit the generated context provider to match the state and behavior you need. Change the code yourself, or ask the AI in the **Code** tab to help. When you're happy with the Data Source, move on to the next step. For the full workflow, see [Build a Data Source in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/build-a-data-source-in-studio-two.md).

The generated Data Source is a counter. For example, to change how much it increments:

1. Open `<provider-folder>.tsx`.
2. In the `increment` function, change `current + 1` to `current + 2`:

   ```tsx
   const increment = () => {
     setCount((current) => current + 2);
   };
   ```

3. To save the file, press `Control+S` (or `Command+S` on macOS).

The counter's increment function now adds 2 to the shared count.

## Step 3 | Check the Data Source

To check the Data Source:

1. Switch to the **Design** tab.
2. In the **Layers** panel, select the page, container, or section that should have access to the Data Source. Then select **More Actions > Connect to Data**. The element's **Settings** panel opens to its **Data sources** section.
3. Click **Connect Source**, then select your Data Source under **Custom code**.
4. Add or select an element inside the area you selected in step 2. Open its **Settings** panel, and click the connect icon next to a property whose data type matches `count`.
5. In the **Connect to Data** panel, select the same Data Source under **Source**, then select `count` under **Field**.
6. Click **Apply**.

The connected element shows the counter's current value. To find the page, container, or section in the **Layers** panel, see [Studio Two Editor: Working with Layers](https://support.wix.com/en/article/studio-two-editor-working-with-layers). For the **Connect Source** panel, see [Connect to Source](https://support.wix.com/en/article/connect-to-source).

## Step 4 | Publish the site

When you're ready, click **Publish** in the Studio Two editor. The Data Source ships with the published site.

## See also

- [About Data Sources](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources.md)
- [Build a Data Source in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/build-a-data-source-in-studio-two.md)
- [Context Provider Extension Files and Code](https://dev.wix.com/docs/site-extensions/context-providers/context-provider-extension-files-and-code.md)
- [Context Providers](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/context-providers.md)
- [About Studio Two Extensions](https://dev.wix.com/docs/studio-two/get-started/about-studio-two-extensions.md)