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.
Studio Two's component model includes UI and logical 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.
- 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. 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.
Studio Two's component extensions use TypeScript manifests 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.
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
- About Manifests: How Studio Two's component manifests work
- Component Integration Patterns: Technical details for component integration
- About Editor React Components: Deep dive into visual components
- About Data Sources: Deep dive into logical components
- About Function Libraries: Deep dive into function libraries
- About Building a Custom Frontend: When to use the component model, the Site SDKs, or embedded scripts