> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Wix Studio: About the Wix IDE
## Article: Wix Studio: About the Wix IDE
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md
## Article Content:
# 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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md), an intelligent companion that offers real-time coding assistance.
> **Note:**
> The Wix IDE is currently unavailable for sites using [Git Integration](https://support.wix.com/en/article/velo-about-git-integration-wix-cli).
## 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](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#backend-folder)
* [pages](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#pages-folder)
* [public](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#public-folder)
* [styles](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#styles-folder)
* 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](https://support.wix.com/en/article/about-web-methods).
+ **data.js**.
A file for [adding data hooks](https://support.wix.com/en/article/velo-using-data-hooks) to your site's collections.
+ **routers.js**
A file for implementing [routing and sitemap](https://support.wix.com/en/article/velo-about-routers#routing-code) functionality for your site.
+ **events.js**
A file for implementing your site's [backend event handlers](https://support.wix.com/en/article/velo-backend-events).
+ **http-functions.js**
A file for implementing [HTTP endpoints](https://www.wix.com/velo/reference/wix-http-functions/introduction "_blank") that are exposed on your site.
+ **jobs.config**
A file for [scheduling recurring jobs](https://support.wix.com/en/article/velo-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 following syntax to import code from backend files:
```js
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](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) 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](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis) 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](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis#implementing-a-custom-extension-with-a-velo-spi).
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](https://support.wix.com/en/article/about-web-methods).
The backend folder also contains the `permissions.json` file. This file defines [permissions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md#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:
```json
{
"web-methods": {
"backend/myFileName.jsw": {
"myFunction": {
"siteOwner" : {
"invoke" : // Boolean
},
"siteMember" : {
"invoke" : // Boolean
},
"anonymous" : {
"invoke" : // Boolean
}
}
}
}
}
```
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`.
```json
{
"web-methods": {
"*": {
"*": {
"siteOwner": {
"invoke": true
},
"siteMember": {
"invoke": true
},
"anonymous": {
"invoke": true
}
}
},
"backend/helperFunctions.jsw": {
"calculate": {
"siteOwner": {
"invoke": true
},
"siteMember": {
"invoke": true
},
"anonymous": {
"invoke": true
}
},
"fetchData": {
"siteOwner": {
"invoke": true
},
"siteMember": {
"invoke": false
},
"anonymous": {
"invoke": false
}
},
"syncWithServer": {
"siteOwner": {
"invoke": true
},
"siteMember": {
"invoke": true
},
"anonymous": {
"invoke": false
}
}
}
}
}
```
### Pages folder
This folder contains code files for each of the pages on your site as well as the [masterpage.js](https://support.wix.com/en/article/velo-working-with-the-velo-sidebar#global-site) 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](https://support.wix.com/en/article/content-manager-about-dynamic-pages#adding-dynamic-pages) 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:
```js
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](https://www.wix.com/velo/reference/$w) 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](https://www.wix.com/velo/reference/$w/styling-elements-with-css). You can also see an element's predefined classes and add custom class names to an element in the [**CSS Classes panel**](https://support.wix.com/en/article/coding-with-the-wix-studio-sidebar#css-classes-panel).
Learn more about [writing CSS code for your site](https://www.wix.com/velo/reference/$w/styling-elements-with-css).
## 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.
2. 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](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save) 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](https://support.wix.com/en/article/about-web-methods).
3. Test your code using a [test site](https://support.wix.com/en/article/creating-a-test-site) or by [previewing your site](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site). You can see messages logged from your code in [Wix Logs](https://support.wix.com/en/article/velo-viewing-live-site-monitoring-events#how-it-works) or by [connecting your site](https://support.wix.com/en/article/velo-connecting-site-monitoring-events-to-google-operations-formerly-stackdriver) to Google Cloud Logs (Cloud Logging).
4. 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](https://support.wix.com/en/article/velo-working-with-npm-packages#installing-a-package), [Velo](https://support.wix.com/en/article/velo-working-with-velo-packages-built-by-wix#setting-up-a-package), and [private](https://support.wix.com/en/article/velo-working-with-your-velo-packages) packages. Once you add these packages in the editor, you can import them in your code files in the IDE.
+ [Adding](https://support.wix.com/en/article/wix-editor-adding-a-page-to-your-site#adding-a-new-page), changing, or deleting pages.
+ [Changing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) element IDs or properties.
+ [Previewing](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site) your site or [creating a test site](https://support.wix.com/en/article/creating-a-test-site).
+ [Publishing](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#publishing-your-site) your site.
+ Creating a [service plugin](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis#implementing-a-custom-extension-with-a-velo-spi).
## 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.
