A custom frontend in Studio Two is the code that runs on a site's pages in the site visitor's browser. Unlike Wix Studio and Wix Editor, Studio Two has no $w API and no page code. Instead, you build frontend features with the following:
- The component model: Extensions for UI and page logic. An Editor React Component (ERC) renders your own UI on the page, and a Wix user places and customizes it in the editor. Data Sources share state across components, and function libraries provide reusable functions.
- Site SDKs: APIs that give frontend code access to the site and the page it's on. For example, use them in a component to link to the site's pages, open popups, or match the site's language and theme.
- Embedded scripts: HTML or JavaScript fragments that load in the head or body of the site's pages, such as an analytics tag.
In Studio Two, Wix renders the site's pages. To replace the whole frontend with one you build and host yourself, see Wix Headless.
Note: If you've coded frontend features on Wix Studio or Wix Editor sites, see Compare Extending Websites in Studio Two to Wix Editor and Wix Studio for what replaces each one.
The following list shows what to use in common cases:
- Custom UI: To add a visible component that a Wix user places on a page and customizes in the editor, build an ERC.
- Shared page state: To share state and behavior across several components on a page, such as a filter that changes what a list shows, add a Data Source.
- Reusable functions: To reuse functions that a Wix user connects to components in the editor, such as date or currency formatting, add a function library.
- Business solution data: To show and act on a Wix business solution's data in a component, such as the current product in Wix Stores, use a Wix business solution context in an ERC.
- Site pages and settings: To link to the site's pages, open popups, or adapt a component to the site's language, theme, or the site visitor's device, call the Site SDKs from the component.
- 3rd-party scripts: To add an analytics tag, tracking pixel, or other 3rd-party script to every page, add an embedded script.
The component model is how you build UI and page logic in Studio Two. Each part is an extension you add from the Code tab through the Wix Extension Builder, and each has a manifest that tells the editor how a Wix user can configure it.
The component model includes the following parts:
- Editor React Components: React components that render on the page. Use an ERC for any visible UI you build yourself. A Wix user places it from the Add Elements panel and customizes it through panels that the editor builds from its manifest.
- Data Sources: Logical components with no UI of their own. A Wix user attaches a Data Source to a page, section, or container, and then connects ERC props to the values and functions it exposes. Use one when several components need the same state. The editor and the Wix Extension Builder call the extension a Data Source, and its generated code uses context provider APIs and React Context.
- Function libraries: Collections of functions that a Wix user connects to component props in the editor. Use one for logic you want to reuse across components without writing it into each one.
Wix business solutions, such as Wix Stores, also provide contexts. An ERC can use a Wix business solution context to read the business solution's data and call its functions, such as adding the current product to the cart.
For how these parts connect, see Component Integration Patterns.
The Site SDKs are APIs that give frontend code access to the site and the page it's on. Unlike the component model and embedded scripts, they aren't extensions. They're npm packages that you install and call from a React component, such as an ERC or a Data Source's provider component. An embedded script isn't a React component, so it can't call them.
Use the Site SDKs when an ERC needs to fit the site it's placed on. For example, a navigation menu ERC can list the site's pages with the Pages API, build each link with the URL API, and open a popup with the Lightbox API. To add that popup in the editor, see Studio Two Editor: Adding and Using Popups.
The Site SDKs include the following categories:
- Pages and Navigation: Find the site's pages, link to them, send site visitors to them, and open popups.
- Site Settings: Read the site's language, regional format, theme, and name, and show a component's text in the page's language. A Wix user sets the theme in the editor. See Studio Two Editor: About Site Styles.
- Rendering and Performance: Find out whether the page is rendering on the server or in the browser, and control what loads first.
- Accessibility and Devices: Adapt a component to the site visitor's device and motion preference, and keep keyboard focus inside an overlay.
Each API's introduction shows how to install its package and call it from a component. To install packages in Studio Two, see Work with npm Packages.
An embedded script is an HTML or JavaScript fragment that loads at a fixed placement in the site's pages. The placement is the head, the start of the body, or the end of the body. A Wix user doesn't place an embedded script in the editor, so it suits code that isn't part of the page layout, such as analytics, tracking pixels, and other 3rd-party tags. The script loads on the published site.
Each embedded script declares a script type, such as analytics or advertising. The script type controls how the script interacts with the site's cookie consent.
For visible UI that a Wix user positions on a page, use an ERC instead.
To add one to your site, see Add an Embedded Script Extension in Studio Two.