> 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: About the Wix IDE for Blocks
## Article: Use the Wix IDE for Blocks
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-wix-ide-for-blocks.md
## Article Content:
# About the Wix IDE for Blocks
**Editor compatibility**
Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).
The Wix IDE provides a browser-based environment built on Visual Studio Code for writing code for Wix Studio sites and Blocks apps.
To use the Wix IDE, open the Blocks code editor and click the **Code in Wix IDE** button. The Wix IDE opens in a new browser tab, allowing you to edit your app's code.
Changes are automatically synced to your app, and the IDE's autosave is enabled by default. You can turn autosave off in the Wix IDE Settings editor.
After coding in the Wix IDE, you can preview your app in Blocks, [test your code in the Editor](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/test-your-app-on-a-site.md), and [release a version](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/manage-blocks-app-versions.md) of your app.
## File structure
Blocks apps have a specific file structure that Wix uses to run your code. When you open the Wix IDE, you will see the following file structure for your app:
### Files and folders overview
* **Backend folder:** Contains the [backend code files](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md) for your app. Your backend files can include:
* General Javascript code files.
* [Web modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md) with a `.web.js` file extensions.
* An `http-functions.js` file for implementing [HTTP functions](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/expose-a-blocks-app-api-with-http-functions.md).
* An `events.js` file for implementing your app's [backend event handlers](https://support.wix.com/en/article/velo-backend-events).
* A `config.json` [Configuration file](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md#add-a-configuration-file) for defining specific settings for your app. You’ll see this file only if you added a Configuration file in Blocks.
* **Site folder:** Contains code files for each of the widgets or plugins in your app, including a **Panels** subfolder for their custom panels. The code you add to these files runs when visitors use the widgets on a site. Code files are created when the widgets, plugins or panels are added and deleted when removed.
* **Public folder:** Contains the [public code files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md) for your app. You can import code from these files into any other file on your app.
* **Dashboard folder:** Contains a file for every [dashboard page in your app](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/dashboard-pages/build-a-dashboard-page-in-blocks.md). Code files are created when the dashboard page is created and deleted when removed.
* **README file:** A Markdown file to [document your app](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md#document-your-app).
* **Other files:** The `jsconfig.json` file and `.wix` folder are in the repo's root folder.
They 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 app and are lost when you close the IDE.
Important:
* The Wix IDE only shows code files for extensions created in Blocks, not self hosted extensions or CLI extensions.
* Wix doesn't support adding files for web crawlers and bots such as `robots.txt`, `ads.txt`, and `security.txt` to your app. If you add these files, they're ignored by Wix.
## Import syntax
To import code from public files:
```ts
import { myFunctionName } from "public/myFileName";
```
To import code from backend files:
```ts
import { myFunctionName } from "backend/myFileName";
```
> **Note:** Trying to import from the relative path in your app’s files doesn't work.
## File naming
The name of the file for widgets, panels and dashboard pages have two parts, separated by a period.
- The prefix is the name of the widget that you define in Blocks.
- The suffix is an ID string for internal use.
For example:
- `Widget 1.odjx6.js`
- `New Panel 1.yjxgv.js`
Warning:
Do not rename widget, panel, or dashboard code files. Wix uses these file names to associate files with their respective components. Renaming a file will result in your code being ignored, and a new file will be created.
## Actions that must be done in Blocks
Certain actions cannot be performed in the Wix IDE and must be done in Blocks:
- Adding NPM packages (once added, they can be imported in the IDE).
- Adding, changing, or deleting widgets, plugins, panels, and dashboard pages.
- Changing element IDs or default values.
- Adding [widget API](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/about-the-widget-api.md) properties, functions and events.
- Previewing your app or [testing it in the Editor](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/test-your-app-on-a-site.md).
- [Releasing a version](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/manage-blocks-app-versions.md) of your app.
## Concurrent Editing
Multiple app collaborators can edit code simultaneously in the Wix IDE. Changes are synced in real-time.
However, you cannot edit your app's code in both the Wix IDE and the Wix Blocks Code panel at the same time. If the Wix IDE is open, the Code panel switches to read-only mode.
To edit in the Code panel, all collaborators must close the Wix IDE. You can then click **Start Coding** in the Code panel.
Important:
The Wix AI Assistant is available in the Wix IDE, but it doesn’t yet support Blocks.