About Coding with Wix Studio

When you code with Wix Studio, you are working in an open development platform that accelerates the way you build web applications. You use APIs to add custom functionality and interactions.

You can code directly in Wix Studio's built-in Code panel, in the Wix IDE (Wix's VS Code-based IDE), or with your own IDE and integrating with GitHub.

Regardless of how you choose to code, you can enjoy serverless coding, all in an open, extendable platform.

Coding features and functionality

This section highlights key features and functionality for coding with Wix Studio's open platform.

• Coding on our open platform. First, familiarize yourself with our platform.

• Different environments for coding. Wix studio offers different options for coding. You decide which option works based on what you need to do.

• CSS styling. Add and customize styling for the site using CSS that was developed outside of the Wix Studio ecosystem.

• Concurrent editing. This feature helps you collaborate efficiently by allowing you and your teammates to work simultaneously on the same site.

• AI assistance. The Wix AI 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.

• Custom extensions (SPIs). You can integrate with service providers to further expand your site's functionality by replacing and extending existing app flows and/or by integrating external services with your site using custom extensions.

• Headless sites and projects. Design an independent site or project that takes advantage of Wix Studio's powerful infrastructure, tools, and capabilities in a headless environment.

• Databases. Connect your site to external database collections in addition to the built-in Wix Content Management System (CMS).

• Functional Testing. The Functional Testing tool allows you to test backend code without having to trigger it from the frontend. You can define custom parameters to use in testing backend functions.

• Packages. This feature lets you choose a package with the functionality you want and add it to your site(s). You can install npm packages and packages built by Wix.

• Blocks. You can add code to your Wix Blocks widgets and apps. Because of this integration, Blocks apps can be anything from simple widget layouts to full-fledged interactive web components, complete with APIs and code files.

• Custom Apps. You can create custom apps using Blocks, and add them to your site. This provides you with the ability to write code with specific functionality and use it across multiple sites.

• Developer tools. A set of developer tools is available to help you monitor, test, and debug the code on your site(s).

• Test sites. As you develop your site's functionality, you may want to test a version of your site on a percentage of your visitors.

• And here are some open-platform features for Wix Studio coders:

  • Fetch for calling external APIs.
  • HTTP functions for exposing your site's functionality as an API.
  • Routers for handling incoming requests to your site's pages/sitemap and directing the user to a custom page, according to the logic in the code.

Ways to code with Wix Studio

Wix is committed to making sure you, as a developer, have the right environment, tools, and APIs to develop sites and apps for your customers. We know coding is not a 1-size-fits-all experience. With Wix Studio, you choose how and where to code:

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

While previewing and publishing your site is always done in the Wix Studio Editor, you can use each coding option at different times in the development flow. For example, you can add properties to elements and add pages to your site using the Code panel, but can then switch to the Wix IDE for coding.

Built-in Code panel

To develop small projects that focus mainly on custom interactions and CSS styling on the frontend, craft your code using Wix Studio's built-in Code panel.

To start, click the and click Start Coding. The resulting Code panel contains:

• The Code sidebar. What you want to code—page code, global page code, CSS styling, and more.

• The Code panel. How you code. The Code panel provides you with:

  • The Code sidebar for navigation between Wix Studio coding features.
  • The code editor for writing and editing your code.
  • The Properties & Events panel for naming elements, setting properties, and defining event handlers.
  • The CSS Classes panel for CSS styling on a specific element.
    
    

Wix IDE

For larger, multi-developer projects that involve more complex frontend code and/or backend code, use the online Wix IDE. The Wix IDE is a VS Code-based IDE that allows you to edit your site's code in your browser—no downloading or configuration necessary. Use familiar VS Code features to get up and running quickly.
Click Code in Wix IDE from the code editor to start coding.

Your own local IDE and GitHub integration

Use the Git Integration and Wix CLI set of power tools to write, test, and publish code for your Wix site locally on your computer.
To set this up, connect your site to GitHub, develop in your favorite IDE, test your code in real time, and publish your site from the command line.

What each coding option offers

Use this table to decide which Wix Studio coding option is for you based on the features provided.

	Code panel	Wix IDE	Git integration
CMS interaction
Serverless
Secure
Open platform
NPM Packages
Velo Packages
Frontend code
CSS styling for all site pages
CSS styling for specific elements
Backend code
Concurrent editing
Collaboration (team work)	For >1 designers and 1 developer
Public files
Online access
Offline access
Complex projects or projects that require a lot of code
Autosave by default			User-set
Wix AI Assistant

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.

Feature	Wix Editor	Wix Studio
Enabling dev mode	From the Dev Mode menu, click	Coding is always available, no need to enable. Click and .
Previewing your site	On the site, click Preview at the top right.	On the site, click at the top right.
Page code	In 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 code	In 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 page	The 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 pages	Limited 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 elements	NA	Code panel: The CSS Classes panel is at the bottom right under the code editor.
Properties & Events panel	Click 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 code	In 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 module .web.js backend files	In 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, add a web module file in the src/backend folder. For example, src/backend<your_file>.web.js.
Web module .jsw backend files (deprecated)	In 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 hooks	Under 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.
Packages	In 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 apps	Under 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 Assistant	NA	Wix IDE sidebar: Click .
GitHub integration	In the Velo sidebar, click and then .	Code panel: In the Code sidebar, click GitHub and then
Routers	In 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 Page	In 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 tools	Accessible from the Velo sidebar or the dashboard.	Accessible from the Developer Tools section of the Code sidebar, or the dashboard.
Test sites	On the site, click Site and then Deploy Test Site.	Click at the top left, Site, and Create Test Site.