> 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 the Component Model

## Article: About the Component Model

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

## Article Content:

# About the Component Model

Studio Two's **component-based extensions** are built with React and TypeScript and use a manifest-driven approach that enables tight integration with the Studio Two editor. These visual and logical components work together to create rich, interactive site experiences.

## Component types

Studio Two's component model includes UI and logical components.

### UI Components

- **Editor React Components (ERCs)**: Visual components that render on your site pages. Wix provides built-in components like Button, Image, Text, and Video Player that users drag from the Add Elements panel. You can also create custom ERCs with your own functionality and design.

### Logical Components

- **Data Sources**: Share state and behavior across multiple components on a page. Data Source is the Studio Two UI name for a context provider extension. Wix provides Data Sources for business solutions, such as the **Product** Data Source for Wix Stores. Learn more about [Wix business solution contexts](https://dev.wix.com/docs/contexts.md). You can also add custom Data Sources for site-specific state, such as filters or page coordination.
- **Function Libraries**: Bundles of reusable functions that other components can call. Wix provides built-in function libraries, and you can create your own with utilities like formatting functions for dates and currencies.

## Component manifests

Studio Two's component extensions use TypeScript [manifests](https://dev.wix.com/docs/studio-two/code-your-site/code-model/about-manifests.md) that create a contract between your components and the Studio Two editor.

Component manifests enable:

- **Editor integration**: Your components get automatic editor settings panels and configuration options. ERCs also get drag-and-drop behavior.
- **Type-safe binding**: Components connect to each other through declared interfaces rather than direct React prop passing.

## Component integration patterns

Studio Two components work together through several mechanisms:

- **Connect an ERC to a Data Source in the editor**: Connect context values to an ERC's props through the editor UI
- **Shared Data Sources**: Multiple ERCs can connect to the same Data Source
- **Use a Wix context in an ERC's code**: An ERC that calls a Wix business solution context's hook, so it uses the context wherever a Wix user places it
- **ERC containers**: Nest ERCs to create complex layouts and data flow
- **ERC composed from ref elements**: Build an ERC's manifest from Wix's own built-in elements
- **Function libraries**: Reusable utilities across all your components

## See also

- [About Manifests](https://dev.wix.com/docs/studio-two/code-your-site/code-model/about-manifests.md): How Studio Two's component manifests work
- [Component Integration Patterns](https://dev.wix.com/docs/studio-two/code-your-site/code-model/component-integration-patterns.md): Technical details for component integration
- [About Editor React Components](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md): Deep dive into visual components
- [About Data Sources](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources.md): Deep dive into logical components
- [About Function Libraries](https://dev.wix.com/docs/studio-two/code-your-site/code-model/function-libraries/about-function-libraries.md): Deep dive into function libraries
- [About Building a Custom Frontend](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/about-building-a-custom-frontend.md): When to use the component model, the Site SDKs, or embedded scripts