Wix Studio: About the Wix IDE

Wix Studio includes a code editor that allows you to add basic frontend code to your site's pages. If you need to add backend code or more complex frontend code, you can use the Wix IDE. The Wix IDE is a VS Code-based IDE that allows you to edit your site's code in your browser. The Wix IDE also provides access to the Wix AI Assistant, an intelligent coding companion that provides real-time assistance.

Understanding your site's file structure

Wix sites have a specific file structure that Wix uses to run your code. When you open the Wix IDE, you see the file structure for your site.

Your site's file structure includes these elements:

• The src folder, that contains the following folders:
  • backend
  • pages
  • public
  • styles
• The jsconfig.json file and .wix folder found in the repo's root folder.

Here is an explanation of the different subfolders in the src folder:

Backend folder

This folder contains the backend code files for your site. Some backend code files are automatically added to this folder, for example, when you add a router to your site, a router.js file is added to your backend folder. If you don't see the file that you need, you can create it.

The backend folder may contain the following files:

• Web Method files:
  These are files that allow you to expose functions in your site's backend that you can run in your frontend code. These files require a .web.js file extension. Learn more about web methods.

• data.js.
  A file for adding data hooks to your site's collections.

• routers.js
  A file for implementing routing and sitemap functionality for your site.

• events.js
  A file for implementing your site's backend event handlers.

• http-functions.js
  A file for implementing HTTP endpoints that are exposed on your site.

• jobs.config
  A file for scheduling recurring jobs. Jobs consist of backend code that's run at regular intervals.

• General backend files
  JavaScript code files. You can import code from these files into any other backend file on your site. These files require a .js file extension.

Use the folowing syntax to import code from backend files:

1
import { myFunctionName } from 'backend/myFileName';

Trying to import from the relative path in your site's files doesn't work.

Config folder

If you add a Velo Package built by Wix to your site, the backend folder contains a folder called __config__. This folder contains an editable config.json file for defining specific settings for your package.

SPI folder

If you add custom extensions to your site, the backend folder contains a folder called __spi__. This folder contains subfolders with the code files for each custom extension.

Learn more about implementing custom extensions.

1
{
2
  "web-methods": {
3
    "backend/myFileName.jsw": {
4
      "myFunction": {
5
        "siteOwner" : {
6
          "invoke" : // Boolean
7
        },
8
        "siteMember" : {
9
          "invoke" : // Boolean
10
        },
11
        "anonymous" : {
12
          "invoke" : // Boolean
13
        }  
14
      }
15
    }
16
  }
17
}

1
{
2
  "web-methods": {
3
    "*": {
4
      "*": {
5
        "siteOwner": {
6
          "invoke": true
7
        },
8
        "siteMember": {
9
          "invoke": true
10
        },
11
        "anonymous": {
12
          "invoke": true
13
        }
14
      }
15
    },
16
    "backend/helperFunctions.jsw": {
17
      "calculate": {
18
        "siteOwner": {
19
          "invoke": true
20
        },
21
        "siteMember": {
22
          "invoke": true
23
        },
24
        "anonymous": {
25
          "invoke": true
26
        }
27
      },
28
      "fetchData": {
29
        "siteOwner": {
30
          "invoke": true
31
        },
32
        "siteMember": {
33
          "invoke": false
34
        },
35
        "anonymous": {
36
          "invoke": false
37
        }
38
      },
39
      "syncWithServer": {
40
        "siteOwner": {
41
          "invoke": true
42
        },
43
        "siteMember": {
44
          "invoke": true
45
        },
46
        "anonymous": {
47
          "invoke": false
48
        }
49
      }
50
    }
51
  }
52
}

Pages folder

This folder contains code files for each of the pages on your site as well as the masterpage.js file. The code you add to these files runs when visitors open pages on your site.

When you add a page to your site in the editor, a code file for that page is added to this folder. The name of the file has 2 components: the name of the page that you define when you create it, and an ID string for internal use. The sections are separated by a period.

When you add a dynamic page to your site, 2 code files are added to this folder corresponding to the dynamic list and dynamic item pages.

When you open a page's code file, you see the same sample code that appears in the Wix Studio Code panel.

When you delete a page in the editor, the page's corresponding code file is deleted as well.

Public folder

This folder contains the public code files for your site. You can import code from these files into any other file on your site.

Use the following syntax to import code from public files:

1
import { myFunctionName } from 'public/myFileName';

Trying to import from the relative path in your site's files doesn't work.

Styles folder

This folder contains custom CSS files for your site. Add custom CSS to your site in a file called global.css. If you don't see this file, you can create it. The styles defined in this file are applied to all the pages on your site.

Many Wix Editor Elements have specially defined class names that you can use to style them. You can also create custom class names to use in your CSS code. To learn about supported elements and their class names, see the Velo API Reference. You can also see an element's predefined classes and add custom class names to an element in the CSS Classes panel.

Learn more about writing CSS code for your site.

Using the Wix IDE

To use the Wix IDE, do the following:

1. Click Code in Wix IDE in the top right corner of the Code editor.

1. The Wix IDE opens in a new browser tab. You can now edit your site's code. Changes saved in the IDE are automatically synced to your site. The IDE's autosave feature is enabled by default. You can disable autosave in the IDE's Settings editor.
   Note: To use backend functions in your public and page code files, export functions from your backend files using web methods.
2. Test your code using a test site or by previewing your site. You can see messages logged from your code in the Site Events monitor or by connecting your site to Google Operations (Cloud Logging).
3. When your code is ready, publish your site to make your changes live.

Editor-only actions

You need to do certain parts of the Wix development flow in the editor. These include:

• Adding NPM, Velo, and private packages. Once you add these packages in the editor, you can import them in your code files in the IDE.
• Adding, changing, or deleting pages.
• Changing element IDs or properties.
• Previewing your site or creating a test site.
• Publishing your site.
• Creating a custom extension.

Concurrent editing

Two or more site contributors can edit a site's code at the same time in the Wix IDE. Edits made in one instance of the IDE are synced to the other instance in real time.

However, you can't edit your site's code in both the Wix IDE and the Wix Studio Code panel at the same time. You also can't edit your code in the Code panel if other site contributors are editing in the Wix IDE. When you open the Wix IDE, the Code panel switches to read-only mode. The Code panel displays this message:

If you want to edit your site's code in the Code panel, all site contributors must close the Wix IDE. You can then click Start Coding in the Code panel.