In This Article

Wix Studio: About the Wix IDE

Note: Some features described in this article aren't yet available to all users.

Wix Studio includes a code editor for adding code directly to your site's pages. For a more advanced option, the Wix IDE provides a browser-based environment built on Visual Studio Code. The Wix IDE also features the Wix AI Assistant, an intelligent companion that offers real-time coding assistance.

Note: The Wix IDE is currently unavailable for sites using Git Integration.

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.

Important: The jsconfig.json file and .wix folder are used to support type checking and autocomplete in the IDE. You don't need to edit these files. Changes to these files aren't synced to your site and are lost when you close the IDE.

Note: Wix doesn't support adding files for web crawlers and bots such as robots.txt, ads.txt, and security.txt to your site. If you add these files, they're ignored by Wix.

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 Module 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. A web module contains one or more 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:

Copy

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.

Service plugin folder

If you add service plugins to your site, the backend folder contains a folder called __spi__. This folder contains subfolders with the code files for each service plugin.

Learn more about implementing service plugins.

permissions.json

Important: You only need to use this file if you export backend functions from .jsw files. We recommend using web methods and exporting backend functions from .web.js files instead. Learn more about web methods.

The backend folder also contains the permissions.json file. This file defines permissions for the functions in your web module files. The file contains a key, "web-methods" which contains an object. Each key in that object corresponds to a web module file in your backend folder. Name these keys with the following syntax: "backend/{path to file}/myFile.jsw". The value for each file name key is an object that contains keys named after the functions in that file. Those objects contain keys for each permission level.

For example:

Copy

Set the permissions for each function using the following values:

Owner-only access:
- siteOwner.invoke: true
- siteMember.invoke: false
- anonymous.invoke : false
Site member access:
- siteOwner.invoke: true
- siteMember.invoke: true
- anonymous.invoke : false
Anyone can access:
- anonymous.invoke: true
- siteMember.invoke : true
- anonymous.invoke: true

The "web-methods" object must also contain a "*" key. The value for this key defines the default permissions that are applied to any function whose permissions you don't set manually.

Here is a sample permissions.json file for a site with a backend file called helperFunctions.jsw. The file's functions are called calculate, fetchData, and syncWithServer. In this case anyone can call calculate, site members can call syncWithServer, and only site owners can call fetchData.

Copy

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 editor.

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

Warning: Do not rename code files for pages. Wix uses these file names to associate the files with the appropriate pages on your site. If you rename a file, your code is ignored and a new code file is created for the page.

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:

Copy

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:

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

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.
Test your code using a test site or by previewing your site. You can see messages logged from your code in Wix Logs or by connecting your site to Google Cloud Logs (Cloud Logging).
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 service plugin.

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.

Was this helpful?

Yes