Working in the Code Panel

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

Using the Wix Editor vs Corvid

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: Corvid. Corvid 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 Corvid. The Code Panel allows us to write our own 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 in the top toolbar between Tools and Help. 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 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

This panel enables you to write code for a website. Two tabs, Site and Page, 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 these specifics in their Corvid JavaScript Support article.

The $w Namespace

With the Code Panel open, the first thing that we see is the following boilerplate code in both the Page and Site tabs:

// For full API documentation, including code examples, visit https://wix.to/94BuAAs $w.onReady(function () { //TODO: write your page related code here... });

For this article, the code we’ll be adding to our website will be placed below the comment beginning with //TODO. 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 Page tab should be open by default. Placing code under the Page tab ensures that it will only run on for 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 that begins with //TODO. We’ll add JavaScript code 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);

Clicking on the format code icon lets us keep our code uniform and easier to read and debug.

Wix Code Panel buttons with formatting button highlighted

The code should now look like this:

// For full API documentation, including code examples, visit https://wix.to/94BuAAs $w.onReady(function () { //TODO: write your page related code here... const greeting = 'Hello, from the Home Page!'; console.log(greeting); });

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-right hand 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 in the Preview view of 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 Site Tab

The code you added on the Page tab in the Code Panel only runs when we visit the page we applied it to. However, the code we place in the Site tab of the Code Panel 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-right hand 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. In the Code Panel, switch to the Site tab and add the following code to print a different message:

$w.onReady(function () { //TODO: write your page related code here... const currentPage = $w("Document").children[0].title; 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.