Moving to Wix Studio

Note: Some of the features listed below are not yet available to all users.

This article is for developers that are familiar with coding in Wix Editor developer mode and are new to coding with Wix Studio.

Use the information provided here to help you transition to Wix Studio coding capabilities.

Start coding

In Velo, you had to enable dev mode to start coding. Wix Studio's coding environment is available at all times.

In Wix Studio, you have several options for coding:

  • With the built-in Code panel
  • Using the Wix IDE
  • In your own local IDE and integrate with GitHub

The Code panel

Code in the Code panel for small, customization projects with frontend code and CSS capabilities.

The Code panel contains the Code editor, the Properties & Events panel, and the CSS Classes panel.

To access, click and then from the Code sidebar.

The Wix IDE

For advanced projects with backend code and more robust frontend code functionality, use this online VS Code-based editor. When used in conjunction with the Wix Studio Editor and the Code panel, you have an end-to-end environment for creating and delivering your projects at scale.

To access the Wix IDE, click at the top of the Code editor.

Important: When building advanced sites and projects, you need to do certain parts of the Wix development flow in the Wix Studio Editor and its Code panel. These tasks are not done in the Wix IDE.

  • Code panel: Changing element IDs or properties.
  • Code panel: 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.
  • Wix Studio editor: Adding, changing, or deleting pages.
  • Wix Studio editor: Previewing your site.
  • Wix Studio editor: Publishing your site.

Local IDE and GitHub integration

Want to work offline using your IDE of choice and GitHub?

  1. Code in your local IDE.
  2. Publish with our CLI.
  3. Integrate with GitHub by clicking GitHub from the Code panel's Code sidebar.

To connect, click , GitHub, and then from the Code sidebar.

Note: The Wix IDE can't be used together with GitHub Integration.

What's new?

The following new features are available with Wix Studio.

  • CSS. Available from the Code panel, you can now use CSS to style all pages or specific elements on your site. CSS styling for all pages is saved in a global.css file and applies globally to every page of your site.

  • Wix IDE. The Wix IDE is an online VS Code-based IDE that allows you to edit your site code in your browser—no downloading or configuration necessary.

  • Wix AI Assistant. The Wix AI Assistant is accessible from the Wix IDE. The assistant helps you use artificial intelligence to get your code up and running quickly and efficiently. The assistant can help write, and even fix, your code. Receive responses in real-time, including code snippets, to help you with your coding tasks.

  • Concurrent editing. 2 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. Learn more about concurrent editing.

  • Search. Located in the Code sidebar, the Search section allows you to search all the code files on your site. You can match cases, match whole words, or use regular expressions.

  • Developer Tools. The Code sidebar contains a set of developer tools to help you monitor, test, and debug the code on your site(s).

What's changed?

This section describes the differences between Wix Editor and Wix Studio.

  • Code editor. What was called the Code panel in the Wix Editor is now called the Code editor.

  • Locations of features. See this table for the new locations of features and how to navigate to them.

  • Backend files. Backend files in Wix Editor are saved as .jsw files. In Wix Studio, .jsw files are still supported for backward compatibility, but backend files are now saved as web.js web method files. When coding, take this into account. Also, permissions are now defined through code and not using the Editor UI.

  • Routers. How to add a router has changed. Other than that, router functionality remains the same.

Coming soon

Switching between the Wix IDE and Git Integration. The Wix IDE can't yet be used together with Git Integration. You can, however, turn on Git Integration to work locally, and then turn it off to resume working in the Wix IDE without losing any work.

Finding your way

The following table lists features you are familiar with in the Wix Editor and directs you to the equivalent features in Wix Studio.

 

FeatureWix EditorWix Studio
Enabling dev modeFrom the Dev Mode menu, click

Coding is always available, no need to enable. Click and .
Previewing your siteOn the site, click Preview at the top right.On the site, click at the top right.
Page codeIn the Velo sidebar under Page Code.Code panel: In the Code sidebar under Page Code.


Wix IDE and GitHub integration: In the Explorer, navigate to src/pages, src/public, and src/styles.
Public codeIn the Velo sidebar under Public Code.Code panel: Under the Public section of Public & Backend in the Code sidebar.


Wix IDE and GitHub Integration: In the Explorer, navigate to src/public.
Master pageThe masterpage.js file is in the Velo sidebar under Page Code.Code panel: The masterpage.js file is in the Main Pages section under Page Code in the Code sidebar.


Wix IDE and GitHub integration: In the Explorer, navigate to src/pages.
CSS for all site pagesLimited release.Code panel: The global.css file is in the CSS section under Page Code in the Code sidebar.


Wix IDE and GitHub integration: In the Explorer, navigate to src/styles.
CSS Classes panel for specific elementsNACode panel: The CSS Classes panel is at the bottom right under the Code editor.
Properties & Events panelClick in the Code panel toolbar. The panel displays on the bottom right.The Properties & Events panel is at the bottom left of the Code editor, next to the Properties & Events panel.
Backend codeIn the Velo sidebar under Public & Backend.Code panel: Under the Backend section of Public & Backend in the Code sidebar.


Wix IDE and GitHub integration: In the Explorer, navigate to the src/backend folder. Here you will see web method files, data.js, routers.js, events.js (for backend event handlers), http-functions.js, jobs.config (for scheduling recurring jobs), and other general Javascript (.js) backend files.
Web methodsNAWix IDE and GitHub integration: In the Explorer, add a web method file in the src/backend folder. For example, src/backend<your_file>.web.js.
Web module .jsw backend filesIn the Velo sidebar under Public & Backend.Under the Backend section of Public & Backend in the Code sidebar.


Wix IDE and GitHub integration: In the Explorer, navigate to the src/backend folder to see web method files.
Data hooksUnder the Backend section of Public & Backend in the Velo sidebar, add a data hook data.js file.Under the Backend section of Public & Backend in the Code sidebar, add a data hook data.js file.


Wix IDE and GitHub integration: In the Explorer, you can see a data.js file in the src/backend folder.
PackagesIn the Velo sidebar, click for npm packages and Velo packages.Code panel: In the Code sidebar, click Package & Apps for npm packages and Velo packages.
Custom appsUnder Custom Apps in the Package & Apps section of the Velo sidebar.Code panel: Under Custom Apps in the Package & Apps section of the Code sidebar.
Custom extensions (SPIs)In the Velo sidebar under Public & Backend.Code panel: Under Custom Apps in the Package & Apps section of the Code sidebar.
Wix AI AssistantNAWix IDE sidebar: Click .
GitHub integrationIn the Velo sidebar, click and then .Code panel: In the Code sidebar, click GitHub and then
RoutersIn the Velo sidebar, under the Page Code's Main Pages section, add a router.

Enter a URL prefix for your router and click Add & Edit Code. This action not only adds router pages to your Page Code, but this action also automatically adds a routers.js file to your site's Backend.
Code panel: In the Code sidebar, under the Page Code's Main Pages section, add a router.

Enter a URL prefix for your router and click Add & Edit Code. This action not only adds router pages to your Page Code, but this action also automatically adds a routers.js file to your site's Backend.


Wix IDE and GitHub integration: In the Explorer, you can see your router pages in the src/pages folder, and a router.js file in the src/backend folder.
Dashboard PageIn the Add panel under Page > Dashboard page.In the Pages panel on the left, click the plus icon , and then click Add under Dashboard Page.
Dev toolsAccessible from the Velo sidebar or the dashboard.Accessible from the Developer Tools section of the Code sidebar, or the dashboard.
Test sitesOn the site, click Site and then Deploy Test Site.Click at the top left, Site, and Create Test Site.
Was this helpful?
Yes
No