About the Wix IDE for Blocks

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, and release a version 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:

file structure

Files and folders overview

  • Backend folder: Contains the backend code files for your app. Your backend files can include:

    • General Javascript code files.
    • Web modules with a .web.js file extensions.
    • An http-functions.js file for implementing HTTP functions.
    • An events.js file for implementing your app's backend event handlers.
    • A config.json 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 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. Code files are created when the dashboard page is created and deleted when removed.

  • README file: A Markdown file to 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:

Copy

To import code from backend files:

Copy

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:

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.

Did this help?