Wix Studio: Working with the Code Panel

The code panel is where you can write code to add custom functionality and interactions to your site. Use the code panel to add frontend code and CSS styling directly with the built-in editor, manage your collections, add code packages, add custom apps or extensions, and access advanced coding features, such as the Wix IDE or GitHub integration.

To begin coding, select the code icon and click Start Coding.

The Page Code section provides you with a frontend code editor for every page on your site.

Toggle between your site pages in the top bar to edit each page's frontend code. You can see which page you are currently editing at the top left of the code editor.

Use the Global Code section to add frontend code that runs on every page. If you want to add processing for your header or footer, this is the place to do it. This is also the place to handle elements that you want to put on every page, like a search bar or shopping cart icon for a store. The global code runs in the masterPage.js file.

The CSS section allows you to add CSS styling that applies globally to every page of your site. Learn more about CSS editing.

In addition to global CSS styling, you can add CSS styles to specific elements on your site with the CSS Classes panel. Select a specific element on your site and the CSS Classes panel displays the available Global classes for that element. You can also create your own custom class with this panel. See custom CSS classes to learn more.

Use the Properties & Events panel to work with selected elements, such as the header and footer, and datasets. With the Properties & Events panel you can change an element's ID and default values, or add an event handler that triggers when an action is taken on this element. Note that not all actions are available for every element.

Select an element on your site and click the Properties & Events tab in the code panel:

Backend code includes files that are not publicly accessible from your site. Since the backend code isn't visible, you can place sensitive information in your backend code that might otherwise be a security risk.

You can't add backend code directly in the code panel. You can add backend code with one of these options:

The Databases section of the sidebar contains your database collections. Click a collection to open it in the Content Management System (CMS).

You can add a new collection by clicking the plus icon that appears when you hover over My Collections, or by clicking on Create collection.

You can add a new dynamic page based on a collection, update a collection's permissions, remove a collection, or add and remove hooks to a collection by clicking the ellipsis    icon that appears when you hover over a collection name.

You can also connect external databases in External Collections. You can manage their content here like any other collection. Read more about using external collections.

When you add certain Wix Apps to your site, database collections are automatically added to your site. These collections appear under Wix App Collections. Wix App collections contain information about the items in your Wix app. Collections for each app are grouped together and are read-only. You can edit the collections in the relevant App manager in your Dashboard.

This section allows you to add complex functionality to your site with packages and apps.

You can use a code library that suits your needs and incorporate it into your own code. Each reusable library of code is known as a package. There are 2 types of pre-built packages that you can install in the Packages section of the sidebar - npm Packages and Velo Packages

You can create a custom app with Wix Blocks. Click the plus icon or Create New App to get started.

Custom extensions, also known as SPIs, allow you to add your own custom logic to out-of-the-box apps and to integrate services from 3rd party providers. Learn more about custom app extensions using SPIs.

In the GitHub section of the sidebar, you can connect your site to GitHub to write, test, and publish code locally on your computer for your Wix site. To get started, select Connect to GitHub. Learn more about GitHub integration.

The Help section offers links to additional resources: