In This Article

About the Code Tab

The Code tab is the Studio Two editor's built-in development environment. It runs Visual Studio Code in the browser, with the site's project already open, so you can edit code, add extensions, and check logs without installing anything locally. The Code tab sits next to the Design tab.

The workspace

The development environment starts the first time the site needs code. Any of these starts it:

Starting it from the Code tab.
Clicking Go to Code on a selected element.
Opening a file from a site code error.
Creating an extension.

The Code tab uses the same layout as a desktop code editor.

The sidebar

The sidebar on the left switches between these views:

Explorer: The project files.
Search: Find and replace across the project.
Wix Extension Builder: Add extensions to the site. Open it from the puzzle-piece icon.
Wix Data: The site's CMS collections. Open it from the database icon.

The + at the top of the Code tab is a shortcut for creating an extension.

The editor

The editor in the middle shows the files you open. Edits save to the site as you work. The project folder is always named user-code.

The panel

The panel along the bottom has tabs for working with the project. To open it, click Toggle Panel at the top right of the Code tab, or press Control+J (or Command+J on macOS).

Terminal: Run commands, such as installing npm packages.
Problems: Issues the editor finds in the project.
WIX LOGS: Logs from the development environment.

Layout controls

The controls at the top right of the Code tab are the standard Visual Studio Code layout controls. Use them to show or hide the sidebar and the panel, customize the layout, and open settings and the command palette.

Add an extension

The Wix Extension Builder is where you add an extension. An extension is custom functionality for the site, such as a component on a page, a dashboard page, or a backend service. Create an Extension starts a new extension. My Extensions lists the extensions already in the site.

For what each extension does, see About Studio Two Extensions.

Work with Aria

Aria is Wix's AI assistant. Open Aria from the icon at the bottom of the left edge of the editor. The panel stays open beside the Code tab.

Ask Aria to build, change, or explain code for the site. For how to open Aria and work with it in the editor, see Working with Aria. For the editor's other AI tools, see Studio Two Editor: About the AI Tools. Aria can help with:

Building an Editor React Component (ERC): a reusable visual element for the site, including a custom interactive experience.
Frontend behavior, such as dynamic content and logic for elements already on the page.
Connections from elements to CMS collections, including content, events, and visibility.
Backend logic, such as integrations and API calls.
Business extensions, such as service plugins and backend events.
Existing code: inspect it, edit it, debug it, fix it, explain it, and plan an implementation before building it.
Sample values for a new Data Source, so the Data Source can render. The editor and the Wix Extension Builder call this extension a Data Source. Its generated code uses context provider APIs and React Context.

Aria writes code when the editor can't already do what you asked. When the editor can, Aria sets that up for you. For example, it connects an element to a CMS collection or a Data Source already on the site.

Aria can use the section you're working on as context, so the answer applies to that part of the site. With a section in context, you can start from a suggestion such as Improve this section or Suggest better layout, or type your own request.

Check the code Aria writes before you use it. It can be wrong.

Edit the project

In Explorer, extensions live under src/extensions/, in site, dashboard, and backend folders depending on where the code runs. Each extension has its own folder, with a .extension.ts manifest file and its implementation files. src/extensions.ts registers the extensions the site uses.

Learn how these pieces fit together in About the Component Model.

To add a library, install an npm package from the Terminal. There is no separate package manager. See Work with npm Packages.

Work with collections

Wix Data, in the Code tab sidebar, is where you work with the site's CMS. It's separate from the Wix Extension Builder. Site code uses the @wix/data package.

Wix Data is not Connect to Data on the Design tab. Connect to Data binds elements to Data Sources and function libraries, including the Data Sources that Wix creates for each CMS collection.

From the Wix Data toolbar you can:

Refresh Collections.
Create Collection.
Configure Credentials.

Create the site's collections with Create Collection. Create Collection opens a script, not a file in the site project. The script creates the collection in the CMS when you run it. In the script, set the collection's ID, display name, fields, and who can read and change the data. You can also run queries against the site's collections. Open the Command Palette and select Wix Data: Write Query.

Configure Credentials opens Wix Data Configuration, which connects the view to the site's collections. The connection uses a Wix API key or a CLI login.

To work with data that lives outside Wix, you can also connect an external database from a Wix Data script.

Check logs

The WIX LOGS panel along the bottom shows what the development environment is doing while you work, such as the dev server starting. In that panel you can use:

Short to shorten the timestamps.
Producers to filter by the part of the system that wrote a line.
Levels to filter by severity.
The search box to find a line.

Problems lists issues the editor finds in the project, such as type errors.

Developer Tools

Developer Tools is in the site dashboard. Open it from the toolbox icon on the left edge of the Studio Two editor.

Monitoring shows Data requests, Backend requests, and CMS collection storage. Use it to find performance issues and errors, and to see how much storage the site's collections use.
Logs shows the messages the site's code writes while the site runs. This is separate from the WIX LOGS panel along the bottom of the Code tab. See About Logs in Studio Two.

Browsers

Some browsers can't open the Code tab, including some versions of Safari. The editor tells you when you need to switch browsers.

Preview and publish

Preview and Publish stay in the editor header while the Code tab is open. Preview runs the site without changing the live version. Publish ships the current code to the live site. For how saving, preview, and publishing work in the editor, see Studio Two Editor: Saving, Previewing, and Publishing a Site.

About Errors in Studio Two covers publishing while the build is failing.

You can also create a test site to try changes without affecting the live site.