Working in the Code Panel

Codecademy Team
Learn how to use the Code Panel in Wix's Code Editor to build a website.

Using the Wix Editor and Velo

Wix is a powerful website builder that gives you all the tools to create your own customized website either from scratch or using a template.

Traditionally, you would have to create each of these elements by writing code in HTML and CSS. Wix’s in-browser visual editor allows you to build a website quickly and easily by dragging and dropping Wix elements like images, buttons, and text directly onto webpages.

After setting up the elements with the Wix editor, we can add further customization to our site by writing code using Wix’s development platform: Velo. Velo allows you to create more complex web applications without ever having to worry about hosting and infrastructure so you can focus just on developing your website.

For the rest of this article, we’ll be using the Wix Editor in Dev Mode to explore the Code Panel feature which is enabled through Velo. The Code Panel allows us to write code for our website and create custom elements or functionality not available to us through a template or pre-made elements.

Accessing the Code Panel

To access the Code Panel, “Dev Mode” must be enabled. It is located in the toolbar at the top of the Wix Editor. Click on Dev Mode and then click on Turn on Dev Mode to enable it.

Wix Dev Mode Button

Turning on Dev Mode opens a side panel, Page Code, that shows the files and folders that make up the website. It also opens up the Code Panel at the bottom of the browser window of the website we’re building.

Wix site with Dev Mode turned on

The Code Panel enables you to write code for a website. The Page Code side panel’s “Main Pages” and “Global” sections allow you to apply code either to a specific page of a website or the entire website.

It’s important to note that the code we add through the Code Panel needs to be JavaScript or Wix-specific syntax. Wix elaborates on these specifics in their Velo JavaScript Support article.

The $w Namespace

With the Code Panel open, the first thing that we see is the following boilerplate code in the files under the Main Pages section:

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
$w.onReady(function () {
// Write your JavaScript here
// To select an element by ID use: $w("#elementID")
// Click "Preview" to run your code
});

Similarly, the following boilerplate code appears in the file under the Global section:

// The code in this file will load on every page of your site
$w.onReady(function () {
// Write your code here
});

For this article, the code we’ll be adding to our website will be placed below the comment // Write your JavaScript here for files under the Main Pages section or // Write your code here for the file under the Global section. We’ll be using a combination of JavaScript and Wix’s $w namespace to interact with Wix UI elements. The $w namespace is a reference to all the Wix-created elements that make up our website. The rest of the code including .onReady(...) allows us to interact with these elements after our website loads in the browser.

Adding Code

We’ll be adding code to the “Home” page.

Wix Header element

At the bottom of the editor in the Code Panel, the Home page tab should be open by default. Placing code in a Main Pages file tab ensures that it will only run on that particular page of the website via our browser. We’ll test this out by printing a message.

Wix Code Panel with tabs highlighted

Find the commented line //TODO: write your page related code here.... We’ll add JavaScript code below this comment to store a string inside a constant using the const keyword:

const greeting = 'Hello, from the Home Page!';

On a new line after where we declared the constant greeting, we can use the JavaScript console.log() function to print the string we stored.

console.log(greeting);

There are also other convenient shortcuts found via Velo keyboard shortcuts. For example, if we wanted to format our code, we could use either Option + Shift + F for Mac or Alt + Shift + F for PC. Formatting code allows us to write uniform code that is easier to read and debug.

Our function now look like this:

$w.onReady(function () {
// Write your JavaScript here
const greeting = 'Hello, from the Home Page!';
console.log(greeting);
// To select an element by ID use: $w("#elementID")
// Click "Preview" to run your code
});

While we can add code in the Wix Editor Code Panel, to run it, we need to preview the website. Click on the Preview button in the upper-righthand corner and the browser will display the website as a user would see it.

A preview of a Wix Website with the Code Panel open

The Developer Console

At the bottom of the previewed page is the “Developer Console.” Click on it to open it if it isn’t already open. It should now display the string stored in greeting:

Hello, from the Home Page!

Click on some of the other pages of the website while previewing your website. Notice that the message "Hello, from the Home Page!" prints only in the Developer Console when the Home page is visited and not when visiting other pages of the website.

The Global Section

The code you added in the Home page file only runs when we visit the page we applied it to. However, the code we place in the masterPage.js file under the Global section will run whenever any of the pages of a website are visited.

Let’s see this, now. Go back to the Editor by clicking on the Back to Editor button in the upper-righthand corner of the preview. Make sure we’re on the Home page or switch to it using the Page dropdown menu in the upper-lefthand corner of the Wix Editor. Click on the masterPage.js file under the Global section of the Page Code side panel to open it in a new tab in the Code Panel. Replace the existing page code on the masterPage.js tab with the code below to print a different message:

import wixSite from 'wix-site';
$w.onReady(function () {
const currentPage = wixSite.currentPage;
console.log(`Currently viewing ${currentPage}`);
});

Click on Preview and visit different pages of the website to see what it does! A message with the name of the current page you’re viewing and the website is printed in the Developer Console for all the pages of the website.

Wix Code Panel with code displayed

Wrapping Up

Congratulations! You’ve made it through the article and built a website with customized code. You now know:

  • how to open the Code Panel and add custom code
  • the $w namespace allows you access Wix Editor Elements
  • how to preview your website and code in the Developer Console

Although this exercise seems simple, you’re now familiar with all the tools needed to create more complicated websites. As a next step after reading this article and watching the video, we encourage you to take what you’ve learned here and try to build a website under your own Wix account using the steps and code in this article.